Sự khác biệt giữa CSS gốc và Sass Nesting

Kể từ khi ra mắt, CSS đã kiên quyết từ chối hỗ trợ cú pháp cho các bộ chọn lồng nhau. Giải pháp thay thế luôn là sử dụng bộ tiền xử lý CSS như Sass. Nhưng ngày nay, lồng nhau chính thức là một phần của CSS gốc. Bạn có thể thử tính năng này trực tiếp trong các trình duyệt hiện đại.

Khi chuyển từ Sass sang CSS gốc, điều cần thiết là phải lưu ý đến sự khác biệt trong các quy ước lồng nhau được sử dụng theo từng cú pháp. Những khác biệt này có thể có tác động đáng kể đến cấu trúc mã và phong cách tổng thể của bạn, do đó bạn bắt buộc phải tự làm quen với những khác biệt này trước khi thực hiện chuyển đổi.

Bạn cần sử dụng “&” với bộ chọn phần tử trong CSS gốc

CSS Nesting vẫn là một bản đặc tả dự thảo, với nhiều trình duyệt hỗ trợ khác nhau. Đảm bảo kiểm tra các trang web như caniuse.com để biết thông tin cập nhật.

Dưới đây là minh họa về loại cấu trúc lồng nhau có thể được sử dụng trong Sass bằng cú pháp SCSS:

 .nav {
  ul { display: flex; }
  a { color: black; }
}

Đoạn mã đã cho liên quan đến quy tắc tạo kiểu cho thanh điều hướng của tài liệu HTML. Cụ thể, nó quy định rằng mọi danh sách có thứ tự chứa trong phần tử mang lớp “điều hướng” phải được hiển thị theo kiểu căn chỉnh (cột) linh hoạt. Hơn nữa, nó yêu cầu bất kỳ văn bản siêu liên kết nào xuất hiện trong các phần tử đó phải có màu đen.

Trong CSS gốc, hình thức lồng nhau nói trên được coi là không thể chấp nhận được. Để cấu trúc này hoạt động hiệu quả, người ta phải kết hợp ký hiệu dấu và (&) trước mỗi phần tử kèm theo, như minh họa dưới đây:

 .nav {
  & ul { display: flex; }
  & a { color: black; }
} 

Trước lần sửa đổi gần đây, lần lặp đầu tiên của Cascading Style Sheets (CSS) không cho phép bao bọc các bộ chọn loại. Tuy nhiên, với sự điều chỉnh mới nhất hiện tại, giờ đây có thể bỏ qua việc sử dụng ký hiệu “&” khi đặt các bộ chọn loại. Tuy nhiên, người dùng nên lưu ý rằng các phiên bản trình duyệt web cũ hơn như Google Chrome và Apple Safari vẫn có thể thiếu khả năng tương thích với phương pháp sửa đổi này.

Trong trường hợp bộ chọn bắt đầu bằng một ký hiệu, chẳng hạn như bộ chọn lớp, được phép loại trừ dấu và khi viết mã CSS hoặc Sass. Điều này có nghĩa là cú pháp được cung cấp sẽ hoạt động chính xác trong cả CSS và Sass thông thường.

 .nav {
  .nav-list { display: flex; }
  .nav-link { color: black; }
}

Bạn không thể tạo bộ chọn mới bằng cách sử dụng “&” trong CSS gốc

Một trong những khía cạnh hấp dẫn của Sass mà bạn có thể đánh giá cao là khả năng tạo điều kiện thuận lợi cho việc tạo mã thông qua các cấu trúc như cấu trúc được trình bày dưới đây:

 .nav {
  &-list { display: flex; }
  &-link { color: black; }
}

Mã Sass đã nói ở trên, khi biên dịch, sẽ mang lại đầu ra CSS chưa được xử lý tiếp theo:

 .nav-list {
  display: flex;
}

.nav-link {
  color: black;
}

Trong CSS tiêu chuẩn, việc sử dụng biểu tượng “&” để tạo bộ chọn mới không được hỗ trợ. Tuy nhiên, khi sử dụng Sass, trình biên dịch sẽ thay thế “&” bằng phần tử kèm theo một cách hiệu quả, chẳng hạn như “.nav”, do đó tránh việc hình thành bộ chọn ghép không phù hợp sẽ mang lại kết quả khác so với kết quả dự kiến.

Phiên bản mã này phải hoạt động chính xác bằng cú pháp CSS gốc:

 .nav {
  &.nav-list { display: flex; }
  &.nav-link { color: black; }
}

Mã được cung cấp hoạt động nhờ sự tương ứng giữa các bộ chọn được sử dụng trong đó. Bộ chọn đầu tiên khớp các phần tử có tên lớp là “danh sách điều hướng” hoặc “liên kết điều hướng”, trong khi bộ chọn thứ hai nhắm mục tiêu cụ thể những phần tử có tên lớp là “nav-link”. Việc đặt khoảng trắng giữa ký hiệu “&” và bộ chọn tiếp theo (ví dụ: “nav.nav-list”) sẽ dẫn đến lỗi cú pháp không hợp lệ vì nó sẽ tạo một nhóm mới bao gồm cả “nav” và “.nav-list”, thay vì nhắm mục tiêu các phần tử sở hữu cả hai lớp.

Trong CSS nguyên bản, việc sử dụng ký hiệu dấu và theo cách được trình bày bên dưới sẽ dẫn đến lỗi ngữ nghĩa:

 .nav {
  &__nav-list { display: flex; }
  &__nav-link { color: black; }
}

Nó giống như viết điều này:

 __nav-list.nav {
  display: flex;
}

__nav-link.nav {
  color: black;
}

Có thể bất ngờ là cả hai phần tử và đều nằm trong bộ chọn .nav . Tuy nhiên, ký hiệu ( & ) định vị hiệu quả các phần tử lồng nhau trước phần tử cha của chúng.

Tính đặc hiệu có thể khác nhau

Điều đáng nói là ảnh hưởng đến độ chính xác xảy ra với cú pháp lồng nhau của Sass, trái ngược với đối tác của nó trong CSS tiêu chuẩn, điều này đáng được chú ý.

Thật vậy, giả sử một phần tử có cả phần tử chính và phần tử bài viết trong cấu trúc HTML của chúng, thì việc sử dụng kiểu CSS được cung cấp sẽ dẫn đến bất kỳ thẻ h2 nào có trong các phần tử tương ứng đó sẽ được hiển thị bằng phông chữ serif.

 #main, article {
  h2 {
    font-family: serif;
  }
}

CSS kết quả được tạo từ mã Sass nói trên sẽ xuất hiện như sau:

 #main h2,
article h2 {
  font-family: serif;
}

Ngược lại với việc sử dụng các bộ chọn lồng nhau trong CSS gốc, việc sử dụng cấu trúc tương đương thông qua cùng một cú pháp sẽ mang lại kết quả tương đương.

 :is(#main, article) h2 {
  font-family: serif;
}

Bộ chọn is() trong LESS hơi khác so với bộ chọn trong Sass về cách xử lý các quy tắc cụ thể. Đặc biệt, khi sử dụng :is() , độ đặc hiệu của bộ chọn sẽ tự động được nâng lên thành phần tử cụ thể nhất trong danh sách các tham số được cung cấp.

Thứ tự của các phần tử có thể thay đổi phần tử được chọn

Hành động lồng trong CSS gốc có khả năng thay đổi ý nghĩa dự định của một bộ chọn nhất định, cuối cùng là chọn một phần tử hoàn toàn khác biệt.

Hãy xem xét HTML sau đây, ví dụ:

 <div class="dark-theme">
  <div class="call-to-action">
    <div class="heading"> Hello </div>
  </div>
</div>

Và CSS sau:

 body { font-size: 5rem; }

.call-to-action .heading {
  .dark-theme & {
    padding: 0.25rem;
    background: hsl(42, 72%, 61%);
    color: #111;
  }
}

Việc sử dụng Sass làm bộ tiền xử lý CSS mang lại kết quả sau:

Trong ngữ cảnh HTML, nếu phần tử mang ký hiệu lớp là “chủ đề tối” được chèn vào trong vùng chứa chính được biểu thị bằng phân loại “lời kêu gọi hành động”, thì tiêu chí lựa chọn kết quả được Sass (bộ tiền xử lý CSS) sử dụng ) sẽ trở nên rối loạn chức năng. Tuy nhiên, theo quy ước CSS thông thường (tức là không cần đến bộ tiền xử lý CSS), các thuộc tính kiểu dáng liên quan sẽ vẫn không bị ảnh hưởng và vẫn hiệu quả.

Hành vi này phát sinh từ cách mà lớp giả :is() hoạt động nội bộ, dẫn đến việc tạo ra biểu diễn CSS không trang trí tiếp theo được hiển thị bên dưới:

 .dark-theme :is(.call-to-action .heading) {
  /* CSS code */
}

Tiêu đề được đề cập là hậu duệ của cả phần tử .dark-theme và phần tử .call-to-action , nhưng thứ tự cụ thể của chúng không ảnh hưởng đến chức năng của nó. Miễn là tiêu đề là hậu duệ của cả hai yếu tố, việc chúng có theo thứ tự cụ thể hay không sẽ không ảnh hưởng đến kết quả.

Trong trường hợp cụ thể này, nó tạo thành một trường hợp ít phổ biến hơn, tuy nhiên việc hiểu được cơ chế nội tại của bộ chọn:is() có thể nâng cao trình độ của một người đối với các phần tử lồng nhau trong CSS. Hơn nữa, kiến ​​thức như vậy tạo điều kiện thuận lợi cho quá trình khắc phục sự cố CSS hiệu quả hơn.

Tìm hiểu cách sử dụng Sass trong React

Nhờ khả năng biên dịch sang CSS, Sass tương thích với nhiều khung giao diện người dùng do khả năng tương thích của nó với hầu hết mọi khung như vậy. Việc cài đặt nó trên nhiều nền tảng khác nhau bao gồm Vue, Preact, Svelte và React rất dễ dàng, mang lại trải nghiệm tích hợp liền mạch trên các công nghệ khác nhau.

Việc sử dụng Sass trong bối cảnh React mang lại một số lợi thế, đặc biệt là khả năng tạo kiểu dáng được tổ chức tốt và có thể tái sử dụng thông qua việc triển khai các biến và mixin. Thành thạo công nghệ này có thể nâng cao đáng kể khả năng của một người trong việc tạo ra mã tinh tế và hiệu quả, cuối cùng thúc đẩy sự phát triển chuyên nghiệp với tư cách là nhà phát triển React.