SASS `@at-root`

Bài viết này giải thích về @at-root của SASS.

Chúng ta sẽ đi từng bước, từ cách dùng cơ bản của @at-root đến các ví dụ nâng cao.

YouTube Video

Giới thiệu về SASS @at-root

@at-root là một chỉ thị do SASS cung cấp, dùng để di chuyển các bộ chọn hoặc thuộc tính đang lồng nhau từ mức lồng hiện tại ra phạm vi cha. Bằng cách tận dụng tính năng này, bạn có thể kiểm soát độ sâu lồng nhau và tạo ra CSS như mong muốn hiệu quả hơn.

Cách sử dụng cơ bản của @at-root

Tính năng lồng nhau của SASS giúp mã dễ đọc hơn, nhưng lồng quá sâu có thể tạo ra CSS ngoài ý muốn. Bằng cách dùng @at-root, bạn có thể loại trừ các khối mã cụ thể khỏi cấu trúc lồng nhau.

Cú pháp Cơ bản

1@at-root {
2  // Code to be output at the parent (root) scope
3}

Ví dụ sử dụng

1.nav {
2  color: blue;
3  @at-root {
4    .nav-item {
5      color: red;
6    }
7  }
8}

CSS đã biên dịch

1.nav {
2  color: blue;
3}
4.nav-item {
5  color: red;
6}

• Nhờ @at-root, .nav-item được xuất ra bên ngoài .nav.

@at-root trong các bộ chọn lồng nhau

Ngay cả trong cấu trúc lồng sâu, dùng @at-root cho phép bạn đưa các bộ chọn cụ thể ra cấp gốc. Điều này giúp bạn xuất ra CSS có kiểm soát ngay cả trong cấu trúc phức tạp.

Ví dụ sử dụng

1.card {
2  background: white;
3  .card-header {
4    color: black;
5    @at-root .card-title {
6      font-size: 20px;
7    }
8  }
9}

CSS đã biên dịch

1.card {
2  background: white;
3}
4.card .card-header {
5  color: black;
6}
7.card-title {
8  font-size: 20px;
9}

• Nhờ @at-root, .card-title được xuất ra bên ngoài .card-header.

@at-root với tham số

Bằng cách chỉ định tham số, @at-root có thể được kiểm soát linh hoạt hơn.

tham số without

Khi dùng tham số without, kết quả xuất sẽ bỏ qua các phạm vi được chỉ định. Nói cách khác, bạn có thể loại bỏ các quy tắc cha hoặc media query.

Ví dụ sử dụng

1.nav {
2  @media (min-width: 768px) {
3    &__item {
4      @at-root (without: media) {
5        color: red;
6      }
7    }
8  }
9}

CSS đã biên dịch

1.nav__item {
2  color: red;
3}

• Trong trường hợp này, @at-root (without: media) loại trừ phạm vi media query và .nav__item được xuất ở cấp gốc.

tham số with

Dùng with sẽ chỉ giữ lại các phạm vi được chỉ định trong kết quả xuất. Hữu ích khi bạn muốn xuất ra cấp gốc nhưng vẫn giữ một số phạm vi nhất định.

Ví dụ sử dụng

 1.nav {
 2  &__item {
 3    @media (min-width: 768px) {
 4      @at-root (with: media) {
 5        &-large {
 6          font-size: 18px;
 7        }
 8      }
 9    }
10  }
11}

CSS đã biên dịch

1@media (min-width: 768px) {
2  .nav__item-large {
3    font-size: 18px;
4  }
5}

• @at-root (with: media) đưa bộ chọn ra cấp gốc đồng thời giữ nguyên cấu trúc media query.

Chỉ định nhiều điều kiện

Bạn cũng có thể chỉ định nhiều phạm vi cùng lúc, cách nhau bằng dấu cách.

Ví dụ sử dụng

1.wrapper {
2  @media (min-width: 600px) {
3    @at-root (without: rule media) {
4      .global-style {
5        color: green;
6      }
7    }
8  }
9}

CSS đã biên dịch

1.global-style {
2  color: green;
3}

• Trong ví dụ này, cả rule (các bộ chọn thông thường) và media (media query) đều bị loại trừ, nên .global-style không thuộc bất kỳ phạm vi nào và được xuất hoàn toàn ở cấp gốc. Điều này hữu ích khi bạn muốn cố ý định nghĩa các style toàn cục ngay cả trong cấu trúc lồng phức tạp.

Kết hợp với media query

Sử dụng @at-root, bạn có thể xuất ra các quy tắc ở cấp gốc từ bên trong các media query. Điều này cho phép bạn định nghĩa thiết kế đáp ứng ở cấp độ thành phần.

Ví dụ sử dụng

1.container {
2  @media (min-width: 768px) {
3    @at-root {
4      .container-large {
5        width: 80%;
6      }
7    }
8  }
9}

CSS đã biên dịch

1.container-large {
2  width: 80%;
3}

• Với @at-root, bạn cũng có thể xuất các style ở cấp gốc ngay từ bên trong media query. Điều này giúp dễ dàng định nghĩa các style toàn cục độc lập cho từng breakpoint.

Trường hợp sử dụng của @at-root

@at-root rất hữu ích khi bạn muốn xuất style ở cấp gốc trong những điều kiện nhất định. Đặc biệt hữu ích khi xử lý media query hoặc các style theo chủ đề bên trong component.

Tách biệt component và theme

Nhờ @at-root, bạn có thể tạo ra các class toàn cục độc lập ngay cả từ bên trong media query. Điều này giúp việc tổ chức theme và trạng thái theo từng component trở nên dễ dàng hơn.

Ví dụ sử dụng

 1.card {
 2  background: white;
 3  color: black;
 4
 5  @media (prefers-color-scheme: dark) {
 6    @at-root (with: media) {
 7      .card-dark {
 8        background: #222;
 9        color: white;
10      }
11    }
12  }
13}

CSS đã biên dịch

 1.card {
 2  background: white;
 3  color: black;
 4}
 5
 6@media (prefers-color-scheme: dark) {
 7  .card-dark {
 8    background: #222;
 9    color: white;
10  }
11}

• Trong ví dụ này, khi định nghĩa style cho chủ đề tối bên trong .card, @at-root tạo ra một class .card-dark riêng biệt. Điều này cho phép bạn chuyển đổi class linh hoạt giữa các chủ đề khác nhau.

Ghi chú

Khi sử dụng @at-root, hãy lưu ý những điểm sau.

1. Tránh lạm dụng @at-root rất mạnh mẽ, nhưng lạm dụng có thể làm mờ ý đồ của cấu trúc lồng nhau.

2. Làm rõ ý đồ Ghi chú lý do bạn dùng @at-root sẽ giúp các lập trình viên khác dễ hiểu hơn.

3. Lưu ý tính nhất quán của phạm vi Đưa phần xuất ra cấp gốc có thể làm thay đổi các mối phụ thuộc giữa style. Hãy nêu rõ nó áp dụng cho những phần tử nào.

4. Kết hợp với các tính năng khác của SASS Kết hợp @at-root với @mixin và @function cho phép thiết kế CSS linh hoạt hơn.

Tóm tắt

{^ i18n_speak @at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video