Sâu trong CSS là gì?

Khám phá các phương pháp thay thế cho phương pháp không dùng nữa. API góc ng-deep để tránh mã kế thừa và các tác dụng phụ khó gỡ lỗi

Đóng gói kiểu là một trong nhiều tính năng tuyệt vời của Angular. Đóng gói kiểu đảm bảo rằng các kiểu thành phần không bị rò rỉ và ảnh hưởng đến phần còn lại của trang

Lớp giả CSS

<style scoped>:global(.red) {  color: red;}</style>

<style scoped>  .a :deep(.b) {  /* .. */}</style>

Vue sẽ biên dịch mã này thành

.a[data-v-f3f3eg9] .b {/* .. */}

Thông tin

Nội dung DOM được tạo bằng v-html không bị ảnh hưởng bởi các kiểu có phạm vi, nhưng bạn vẫn có thể tạo kiểu cho chúng bằng bộ chọn sâu

Bộ chọn có rãnh

Theo mặc định, kiểu có phạm vi không ảnh hưởng đến nội dung được hiển thị bởi

<style scoped>:global(.red) {  color: red;}</style>

<style scoped>:global(.red) {  color: red;}</style>

<style scoped>:slotted(div) {  color: red;}</style>

Bộ chọn toàn cầu

Lớp giả

.a[data-v-f3f3eg9] .b {/* .. */}

.a[data-v-f3f3eg9] .b {/* .. */}

<style scoped>:global(.red) {  color: red;}</style>

Để cụ thể hơn, tôi khuyên bạn nên thêm khối

.a[data-v-f3f3eg9] .b {/* .. */}

<style scoped>:global(.red) {  color: red;}</style><style>  body {  margin: 0;  padding: 0;}</style>

tài liệu chính thức

Nếu bạn thích mẹo Vue này, hãy theo dõi tôi trên Twitter để nhận thông báo về các mẹo mới, bài đăng trên blog, v.v. Ngoài ra (hoặc bổ sung), bạn có thể đăng ký nhận bản tin Vue hàng tuần của tôi

Trong bài đăng này, chúng ta sẽ tìm hiểu cách hoạt động của cơ chế tạo kiểu Angular mặc định (Đóng gói mô phỏng) và chúng ta cũng sẽ đề cập đến hỗ trợ Sass của Angular CLI và một số phương pháp hay nhất về cách tận dụng nhiều tính năng Sass có sẵn

Chúng ta sẽ nói về thời điểm sử dụng từng tính năng và tại sao, nói về lợi ích của việc cách ly kiểu thành phần và cũng đề cập đến cách gỡ lỗi các kiểu của chúng ta nếu có điều gì đó không hoạt động

Đây là bài thứ hai của loạt bài hai phần về Kiểu dáng thành phần góc, nếu bạn đang muốn tìm hiểu về ngClass và ngStyle, hãy xem phần một

Góc ngClass và ngStyle. Hướng dẫn hoàn chỉnh

Mục lục

Bài đăng này sẽ bao gồm các chủ đề sau

• Cách ly kiểu góc - Nó hoạt động như thế nào?
• Gỡ lỗi kiểu góc
• Công cụ sửa đổi

  .a[data-v-f3f3eg9] .b {/* .. */}

  2, khi nào nên sử dụng nó và tại sao
• Công cụ sửa đổi

  .a[data-v-f3f3eg9] .b {/* .. */}

  3, các trường hợp sử dụng phổ biến cho chủ đề
• Công cụ sửa đổi

  .a[data-v-f3f3eg9] .b {/* .. */}

  4,

  .a[data-v-f3f3eg9] .b {/* .. */}

  5 hoặc

  .a[data-v-f3f3eg9] .b {/* .. */}

  6 (sắp ngừng sử dụng)
• Cách tạo kiểu cho nội dung được chiếu bằng cách sử dụng

  .a[data-v-f3f3eg9] .b {/* .. */}

  7
• Hỗ trợ Bộ tiền xử lý CSS CLI góc - Sass, Less và Stylus
• Làm cách nào chúng ta có thể sử dụng Sass để cải thiện phong cách của mình
• Tóm lược

Để bao quát từng tính năng, chúng tôi sẽ thêm nhiều ví dụ vào ứng dụng mẫu Angular CLI nhỏ này, ứng dụng này sẽ sử dụng làm kiểu bên ngoài cho chủ đề mặc định của Bootstrap

Tại sao cách ly phong cách?

Vì vậy, không cần phải chần chừ thêm nữa, hãy bắt đầu với phần tìm hiểu sâu về Cách ly phong cách góc cạnh của chúng tôi. Câu hỏi đầu tiên xuất hiện trong đầu là tại sao chúng ta lại muốn tách biệt các kiểu thành phần của mình?

Khi chúng tôi phát triển bộ kiểu dáng thành phần cho một ứng dụng, chúng tôi có xu hướng gặp phải các tình huống trong đó kiểu dáng từ một tính năng bắt đầu can thiệp vào kiểu dáng của tính năng khác

Điều này là do các trình duyệt chưa hỗ trợ rộng rãi cho cách ly kiểu, nơi chúng tôi có thể hạn chế một kiểu chỉ được áp dụng cho một phần cụ thể của trang

Nếu chúng tôi không cẩn thận và sắp xếp các kiểu của mình một cách có hệ thống để ngăn chặn vấn đề này (ví dụ: sử dụng một phương pháp như SMACSS), chúng tôi sẽ nhanh chóng gặp phải các vấn đề về bảo trì CSS

Sẽ thật tuyệt nếu có thể tạo kiểu cho các thành phần của chúng ta chỉ bằng các bộ chọn ngắn, đơn giản và dễ đọc mà không phải lo lắng về tất cả các tình huống trong đó các kiểu đó có thể vô tình bị ghi đè phải không?

Một lợi ích khác của cách ly phong cách

Đây là một kịch bản khác. chúng tôi đã thử sử dụng thành phần của bên thứ ba bao nhiêu lần, thêm nó vào ứng dụng của mình chỉ để phát hiện ra rằng thành phần đó đã bị hỏng hoàn toàn do các vấn đề về kiểu dáng?

Cách ly kiểu sẽ cho phép chúng tôi gửi các thành phần của mình khi biết rằng các kiểu của thành phần đó (rất có thể) sẽ không bị ghi đè bởi các kiểu khác trong ứng dụng đích

Điều này làm cho thành phần có thể tái sử dụng hiệu quả hơn nhiều, bởi vì thành phần bây giờ trong hầu hết các trường hợp sẽ chỉ hoạt động, bao gồm các kiểu

Đóng gói chế độ xem góc mang lại cho chúng ta tất cả những lợi thế này, vì vậy hãy tìm hiểu cách thức hoạt động của nó

Bản trình diễn đóng gói mô phỏng góc

Trong phần này, chúng ta sẽ xem cách hoạt động của kiểu dáng thành phần Angular dưới mui xe, vì đây là cách tốt nhất để hiểu nó. Điều này cũng sẽ cho phép chúng tôi gỡ lỗi cơ chế nếu cần

Đây là video trình diễn cơ chế mặc định đang hoạt động

Để hưởng lợi từ cơ chế đóng gói chế độ xem mặc định của Angular, tất cả những gì chúng ta cần làm là thêm các lớp CSS của mình vào một tệp CSS bên ngoài

Nhưng sau đó, thay vì thêm tệp này vào

.a[data-v-f3f3eg9] .b {/* .. */}

.a[data-v-f3f3eg9] .b {/* .. */}

ng set defaults.styleExt scss

Màu đỏ sau đó sẽ được áp dụng cho nút này, như mong đợi. Nhưng nếu bây giờ chúng ta có một nút khác, chẳng hạn như trực tiếp ở cấp độ của

.a[data-v-f3f3eg9] .b {/* .. */}

Nếu bạn không biết rằng có một số loại cơ chế cách ly kiểu đang hoạt động, bạn có thể ngạc nhiên khi biết rằng nút này KHÔNG có nền đỏ

Chuyện gì đang xảy ra ở đây vậy?

Cách ly kiểu góc hoạt động như thế nào?

Để hiểu rõ hơn cách đóng gói chế độ xem mặc định hoạt động, hãy xem phần tử HTML tùy chỉnh

ng set defaults.styleExt scss

Một số điều đang diễn ra ở cấp độ HTML thời gian chạy

• một thuộc tính trông kỳ lạ đã được thêm vào phần tử tùy chỉnh

  ng set defaults.styleExt scss
  

  3. tài sản

  ng set defaults.styleExt scss
  

  4
• Mỗi phần tử HTML bên trong thành phần gốc của ứng dụng có một thuộc tính lạ nhưng khác.

  ng set defaults.styleExt scss
  

  5

Những tính chất này là gì?

Vậy các thuộc tính này hoạt động như thế nào?

Để đơn giản, chúng tôi sẽ xác định kiểu nội tuyến cho thành phần này bên cạnh mẫu

Và sử dụng thành phần mới được xác định này, chúng tôi sẽ thêm nó vào mẫu của thành phần gốc ứng dụng

Ở giai đoạn này, hãy thử đoán xem HTML khi chạy sẽ trông như thế nào và điều gì đã xảy ra với các thuộc tính có tên lạ đó

Thuộc tính cách ly kiểu phần tử máy chủ và phần tử mẫu

Với thành phần thứ hai này đã sẵn sàng, chúng ta hãy có một cái nhìn thứ hai về HTML. Cách thức hoạt động của hai thuộc tính này sẽ trở nên rõ ràng hơn nhiều

Lưu ý phần tử

ng set defaults.styleExt scss

ng set defaults.styleExt scss

Phần tử

ng set defaults.styleExt scss

ng set defaults.styleExt scss

Nhưng bây giờ, các phần tử bên trong mẫu

ng set defaults.styleExt scss

.a[data-v-f3f3eg9] .b {/* .. */}

Tóm tắt về cách hoạt động của các thuộc tính phần tử máy chủ và mẫu

Sau đó, hãy tóm tắt cách các thuộc tính HTML đặc biệt này hoạt động và sau đó xem cách chúng kích hoạt tính năng cách ly kiểu

• khi khởi động ứng dụng (hoặc tại thời điểm xây dựng với AOT), mỗi thành phần sẽ có một thuộc tính duy nhất được gắn vào thành phần máy chủ, tùy thuộc vào thứ tự xử lý các thành phần đó.

  ng set defaults.styleExt scss
  

  4,

  ng set defaults.styleExt scss
  

  7, v.v.

• cùng với đó, mỗi phần tử bên trong mỗi mẫu thành phần cũng sẽ được áp dụng một thuộc tính duy nhất cho thành phần cụ thể đó.

  ng set defaults.styleExt scss
  

  5,

  .a[data-v-f3f3eg9] .b {/* .. */}

  21, v.v.

Đây là tất cả minh bạch và được thực hiện dưới mui xe cho chúng tôi

Làm cách nào để các thuộc tính này cho phép đóng gói chế độ xem?

Sự hiện diện của các thuộc tính này có thể cho phép chúng tôi viết các kiểu CSS theo cách thủ công, được nhắm mục tiêu nhiều hơn chỉ là các kiểu đơn giản mà chúng tôi có trên mẫu của mình

Ví dụ: nếu chúng ta chỉ muốn phạm vi màu xanh lam cho thành phần

ng set defaults.styleExt scss

Mặc dù kiểu 1 có thể áp dụng cho bất kỳ phần tử nào có lớp

ng set defaults.styleExt scss

Vì vậy, điều này có nghĩa là kiểu 2 chỉ có phạm vi hiệu quả đối với các thành phần của mẫu thành phần

ng set defaults.styleExt scss

Vì vậy, bây giờ chúng ta có thể thấy cách hai thuộc tính đặc biệt đó kích hoạt một số kiểu cách ly, nhưng sẽ rất cồng kềnh nếu phải sử dụng các thuộc tính đó theo cách thủ công trong CSS của chúng ta (và trên thực tế, chúng ta không nên làm vậy)

Nhưng may mắn thay, chúng ta không phải. Angular sẽ tự động làm điều đó cho chúng ta

Làm thế nào để góc đóng gói phong cách?

Khi khởi động (hoặc lúc xây dựng nếu sử dụng AOT), Angular sẽ xem kiểu nào được liên kết với thành phần nào, thông qua thuộc tính thành phần

.a[data-v-f3f3eg9] .b {/* .. */}

ng set defaults.styleExt scss

Sau đó, Angular sẽ lấy các kiểu đó và áp dụng chúng một cách rõ ràng với các thuộc tính cách ly tương ứng, sau đó sẽ đưa các kiểu trực tiếp vào tiêu đề trang dưới dạng thẻ

.a[data-v-f3f3eg9] .b {/* .. */}

Thuộc tính

.a[data-v-f3f3eg9] .b {/* .. */}

ng set defaults.styleExt scss

Và đó là cách hoạt động của cơ chế đóng gói chế độ xem mặc định của Angular

Cơ chế này không chống đạn 100% vì nó không đảm bảo khả năng cách ly hoàn hảo, nhưng trên thực tế, nó gần như luôn hoạt động

Cơ chế này không dựa trên DOM bóng tối mà thay vào đó là các thuộc tính HTML đặc biệt này, vì vậy nếu chúng tôi thực sự muốn, chúng tôi vẫn có thể ghi đè các kiểu này

Nhưng do cơ chế cách ly Shadow Dom gốc hiện chỉ khả dụng trong Chrome và Opera, chúng tôi chưa thể dựa vào nó

Cơ chế này rất hữu ích vì nó cho phép chúng ta viết các kiểu đơn giản không dễ bị phá vỡ, nhưng đôi khi chúng ta có thể muốn phá vỡ sự cô lập này một cách có chọn lọc

Hãy tìm hiểu một vài cách để làm điều đó và tại sao chúng ta muốn làm điều đó

Bộ chọn lớp giả .a[data-v-f3f3eg9] .b {/* .. */}2

Đôi khi, chúng tôi muốn tạo kiểu cho chính phần tử HTML tùy chỉnh của thành phần chứ không phải thứ gì đó bên trong mẫu của nó

Ví dụ, giả sử rằng chúng ta muốn tạo kiểu cho chính thành phần

ng set defaults.styleExt scss

Chúng tôi không thể làm điều đó bằng cách sử dụng các kiểu bên trong tệp liên kết

.a[data-v-f3f3eg9] .b {/* .. */}

Điều này là do tất cả các kiểu bên trong tệp đó sẽ nằm trong phạm vi các thành phần của mẫu chứ không phải chính thành phần bên ngoài

ng set defaults.styleExt scss

Nếu chúng ta muốn tạo kiểu cho phần tử máy chủ của chính thành phần đó, chúng ta cần bộ chọn lớp giả đặc biệt

.a[data-v-f3f3eg9] .b {/* .. */}

.a[data-v-f3f3eg9] .b {/* .. */}

Bộ chọn này sẽ đảm bảo các kiểu đó chỉ nhắm mục tiêu phần tử

ng set defaults.styleExt scss

ng set defaults.styleExt scss

Việc sử dụng

ng set defaults.styleExt scss

ng set defaults.styleExt scss

ng set defaults.styleExt scss

Nếu bạn muốn xem minh họa trực quan về hoạt động của bộ chọn lớp giả

.a[data-v-f3f3eg9] .b {/* .. */}

Kết hợp bộ chọn

.a[data-v-f3f3eg9] .b {/* .. */}

2 với các bộ chọn khác

Lưu ý rằng có thể kết hợp bộ chọn này với các bộ chọn khác, đây là điều mà chúng ta chưa nói đến

Điều này không dành riêng cho bộ chọn này, nhưng hãy xem ví dụ tại bộ chọn này, nơi chúng tôi đang tạo kiểu cho các phần tử

.a[data-v-f3f3eg9] .b {/* .. */}

Bạn có thể ngạc nhiên khi biết rằng phong cách này chỉ áp dụng cho các phần tử

.a[data-v-f3f3eg9] .b {/* .. */}

ng set defaults.styleExt scss

ng set defaults.styleExt scss

Để biết lý do tại sao, chúng ta hãy xem các kiểu được tạo trong thời gian chạy

Vì vậy, chúng ta có thể thấy rằng thuộc tính phạm vi đặc biệt cũng được áp dụng cho các bộ chọn lồng nhau, để đảm bảo kiểu luôn nằm trong phạm vi mẫu cụ thể đó

Nhưng nếu chúng ta muốn ghi đè kiểu dáng của tất cả các phần tử

.a[data-v-f3f3eg9] .b {/* .. */}

Bộ chọn lớp giả .a[data-v-f3f3eg9] .b {/* .. */}5

Nếu chúng tôi muốn các kiểu thành phần xếp tầng cho tất cả các thành phần con của một thành phần, nhưng không phải cho bất kỳ thành phần nào khác trên trang, thì hiện tại chúng tôi có thể làm như vậy bằng cách kết hợp

.a[data-v-f3f3eg9] .b {/* .. */}

.a[data-v-f3f3eg9] .b {/* .. */}

Điều này sẽ tạo ra trong thời gian chạy một phong cách trông như thế này

Vì vậy, kiểu này sẽ được áp dụng cho tất cả các phần tử

.a[data-v-f3f3eg9] .b {/* .. */}

ng set defaults.styleExt scss

Ví dụ, sự kết hợp các bộ chọn này rất hữu ích để áp dụng các kiểu cho các thành phần được chuyển đến mẫu bằng cách sử dụng

.a[data-v-f3f3eg9] .b {/* .. */}

Không dùng nữa

.a[data-v-f3f3eg9] .b {/* .. */}

5,

.a[data-v-f3f3eg9] .b {/* .. */}

4 và

.a[data-v-f3f3eg9] .b {/* .. */}

6

Bộ chọn lớp giả

.a[data-v-f3f3eg9] .b {/* .. */}

.a[data-v-f3f3eg9] .b {/* .. */}

.a[data-v-f3f3eg9] .b {/* .. */}

Lý do chính cho điều đó là cơ chế xuyên thủng hộp cát cách ly kiểu dáng xung quanh một thành phần này có khả năng khuyến khích các hành vi tạo kiểu xấu

Tình hình vẫn đang phát triển, nhưng hiện tại, có thể sử dụng

.a[data-v-f3f3eg9] .b {/* .. */}

Bộ chọn lớp giả .a[data-v-f3f3eg9] .b {/* .. */}3

Đôi khi, chúng tôi cũng muốn một thành phần áp dụng một kiểu cho một số thành phần bên ngoài nó. Điều này không xảy ra thường xuyên, nhưng một trường hợp sử dụng phổ biến có thể xảy ra là dành cho các lớp hỗ trợ chủ đề

Ví dụ: giả sử chúng tôi muốn gửi một thành phần có nhiều chủ đề thay thế. Mỗi chủ đề có thể được kích hoạt thông qua việc thêm một lớp CSS vào phần tử cha của thành phần

Đây là cách chúng tôi có thể triển khai trường hợp sử dụng này bằng cách sử dụng bộ chọn

.a[data-v-f3f3eg9] .b {/* .. */}

Các kiểu theo chủ đề này bị tắt theo mặc định. Để kích hoạt một chủ đề, chúng ta cần thêm vào bất kỳ phần tử cha nào của thành phần này một trong các lớp kích hoạt chủ đề

Ví dụ: đây là cách chúng tôi kích hoạt chủ đề màu xanh lam

Hãy xem video này để xem bản demo trực quan của bộ chọn

.a[data-v-f3f3eg9] .b {/* .. */}

Tất cả các chức năng này mà chúng ta đã thấy cho đến nay đều sử dụng CSS đơn giản

Nhưng đặc biệt trong trường hợp chủ đề, sẽ thật tuyệt nếu có thể mở rộng ngôn ngữ CSS và chẳng hạn như xác định màu chính của chủ đề trong một biến, để tránh lặp lại như chúng ta sẽ làm trong Javascript

Đó là một trong nhiều trường hợp sử dụng mà chúng tôi có thể hỗ trợ bằng bộ tiền xử lý CSS

Angular CLI - Hỗ trợ Sass, Less và Stylus

Bộ tiền xử lý CSS là một chương trình sử dụng phiên bản mở rộng của CSS và biên dịch nó thành CSS đơn giản

Angular CLI hỗ trợ tất cả các bộ tiền xử lý chính, nhưng cái dường như được sử dụng phổ biến nhất trong các dự án liên quan đến Angular (chẳng hạn như Vật liệu góc) là Sass

Để sử dụng tệp Sass thay vì tệp CSS, chúng ta chỉ cần chuyển tệp đó đến thuộc tính

ng set defaults.styleExt scss

Sau đó, CLI sẽ lấy tệp Sass này và chuyển đổi nó thành CSS đơn giản một cách nhanh chóng. Trên thực tế, chúng ta có thể tạo các thành phần mới bằng các tệp Sass bằng lệnh này

<style scoped>:global(.red) {  color: red;}</style>

Chúng tôi cũng có thể đặt thuộc tính toàn cầu để các tệp Sass được sử dụng theo mặc định

ng set defaults.styleExt scss

Demo một số điều chúng ta có thể làm với Sass

Bộ tiền xử lý là một thứ tuyệt vời để thêm vào dự án của chúng tôi, để giúp chúng tôi viết các kiểu dễ bảo trì hơn. Chúng ta hãy xem xét một số điều mà chúng ta có thể làm với Sass

Nếu bạn chưa bao giờ thấy cú pháp này trước đây, nó có thể hơi ngạc nhiên. Nhưng đây là những gì đang diễn ra, từng dòng một

• trên dòng 2, chúng tôi đã thực sự xác định một biến CSS. Đây là một tính năng rất lớn bị thiếu trong CSS
• chúng ta có thể xác định không chỉ màu sắc mà cả số hoặc thuộc tính kết hợp tốc ký sự kiện, chẳng hạn như.

  .a[data-v-f3f3eg9] .b {/* .. */}

  70
• trên các dòng 6, 10 và 11, chúng tôi đang sử dụng biến mà chúng tôi vừa tạo
• trên dòng 9, chúng tôi đang sử dụng kiểu lồng nhau và tạo tham chiếu đến kiểu gốc bằng cú pháp

  .a[data-v-f3f3eg9] .b {/* .. */}

  71

Và đây chỉ là một ví dụ nhỏ về những gì chúng ta có thể làm với Sass, chỉ là một vài tính năng rất thường được sử dụng. Angular CLI cũng có hỗ trợ cho các kiểu toàn cầu, mà chúng ta có thể kết hợp với các kiểu đóng gói chế độ xem dành riêng cho thành phần của mình

Chúng tôi có thể thêm các kiểu toàn cầu không chỉ cho các bộ xử lý trước được hỗ trợ mà còn cho cả CSS đơn giản

Tóm lược

Có rất nhiều tùy chọn để tạo kiểu cho các thành phần của chúng ta, vì vậy điều quan trọng là phải biết nên sử dụng cái nào khi nào và tại sao. Đây là một bản tóm tắt ngắn

• đôi khi chúng tôi muốn các kiểu chung, được áp dụng cho tất cả các thành phần của trang - chúng tôi có thể thêm các kiểu đó vào cấu hình

  .a[data-v-f3f3eg9] .b {/* .. */}

  72 của mình
• cơ chế đóng gói Chế độ xem góc cho phép chúng tôi viết các kiểu đơn giản hơn, dễ đọc hơn và sẽ không can thiệp vào các kiểu khác
• Cơ chế đóng gói chế độ xem mặc định sẽ mang lại lợi ích lâu dài khi có ít lỗi liên quan đến CSS hơn nhiều. Sử dụng nó, chúng ta sẽ ít khi rơi vào trường hợp thêm một số CSS sửa màn hình này nhưng vô tình làm hỏng màn hình khác - đây là một điểm cộng rất lớn
• Nếu chúng tôi đang viết nhiều CSS trong dự án của mình, có lẽ chúng tôi muốn áp dụng một phương pháp để cấu trúc các kiểu của chúng tôi ngay từ đầu, chẳng hạn như SMACSS chẳng hạn
• Tại một thời điểm nhất định, chúng tôi có thể xem xét giới thiệu một bộ tiền xử lý và sử dụng một số tính năng của nó, chẳng hạn như để xác định các biến CSS

Tôi hy vọng rằng bài đăng này sẽ giúp chọn cách tạo kiểu cho các thành phần của bạn, nếu bạn có một số câu hỏi, vui lòng cho tôi biết trong các nhận xét bên dưới và tôi sẽ liên hệ lại với bạn

Nếu bạn muốn tìm hiểu thêm về các tính năng nâng cao khác của Angular Core, chúng tôi khuyên bạn nên tham khảo khóa học Angular Core Deep Dive, trong đó kiểu dáng thành phần được đề cập chi tiết hơn

Việc sử dụng sâu trong CSS là gì?

Thẻ sâu trong HTML là gì?

chúng ta có thể sử dụng ng

Sâu trong Vue là gì?