SASS `@at-root`

Artikel ini menerangkan @at-root SASS.

Kami akan merangkumi segala-galanya daripada penggunaan asas @at-root hingga contoh lanjutan, langkah demi langkah.

YouTube Video

Perihal SASS @at-root

@at-root ialah direktif yang disediakan oleh SASS untuk memindahkan pemilih atau sifat yang bersarang daripada penyarangan semasa ke skop induk. Dengan memanfaatkan ciri ini, anda boleh mengawal kedalaman penyarangan dan menjana CSS yang dikehendaki dengan lebih cekap.

Penggunaan asas @at-root

Penyarangan SASS menjadikan kod lebih mudah dibaca, tetapi penyarangan yang terlalu dalam boleh menyebabkan CSS yang tidak diingini dihasilkan. Dengan menggunakan @at-root, anda boleh mengecualikan blok kod tertentu daripada struktur penyarangan.

Sintaks Asas

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

Contoh Penggunaan

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

CSS yang terhasil

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

• Disebabkan @at-root, .nav-item dikeluarkan di luar .nav.

@at-root dalam pemilih bersarang

Walaupun dalam penyarangan yang dalam, penggunaan @at-root membolehkan anda memindahkan pemilih tertentu ke aras akar. Ini membolehkan anda mengeluarkan CSS yang terkawal walaupun dalam struktur yang kompleks.

Contoh Penggunaan

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

CSS yang terhasil

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

• Dengan menggunakan @at-root, .card-title dikeluarkan di luar .card-header.

@at-root dengan argumen

Dengan menetapkan argumen, @at-root boleh dikawal dengan lebih fleksibel.

argumen without

Apabila anda menggunakan argumen without, keluaran mengabaikan skop yang ditentukan. Dengan kata lain, anda boleh menyingkirkan peraturan induk atau kueri media.

Contoh Penggunaan

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

CSS yang terhasil

1.nav__item {
2  color: red;
3}

• Dalam kes ini, @at-root (without: media) mengecualikan skop kueri media, dan .nav__item dikeluarkan pada aras akar.

argumen with

Menggunakan with mengekalkan hanya skop yang dinyatakan dalam keluaran. Berguna apabila anda mahu mengeluarkan ke aras akar sambil mengekalkan skop tertentu.

Contoh Penggunaan

 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 yang terhasil

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

• @at-root (with: media) memindahkan pemilih ke aras akar sambil mengekalkan struktur kueri media.

Menetapkan berbilang syarat

Anda juga boleh menentukan beberapa skop pada masa yang sama, dipisahkan dengan ruang.

Contoh Penggunaan

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

CSS yang terhasil

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

• Dalam contoh ini, kedua-dua rule (pemilih biasa) dan media (kueri media) dikecualikan, jadi .global-style tidak tergolong dalam mana-mana skop dan dikeluarkan sepenuhnya pada aras akar. Ini berguna apabila anda ingin mentakrif gaya global dengan sengaja walaupun dalam penyarangan yang kompleks.

Menggabungkan dengan kueri media

Dengan menggunakan @at-root, anda boleh menghasilkan gaya pada peringkat akar dari dalam kueri media. Ini membolehkan anda mentakrifkan reka bentuk responsif pada peringkat komponen.

Contoh Penggunaan

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

CSS yang terhasil

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

• Dengan menggunakan @at-root, anda juga boleh mengeluarkan gaya aras akar dari dalam kueri media. Ini memudahkan anda mentakrif gaya global yang bebas bagi setiap titik henti.

Kes penggunaan @at-root

@at-root berguna apabila anda ingin mengeluarkan gaya pada aras akar di bawah syarat tertentu. Ia amat membantu apabila mengendalikan kueri media atau gaya khusus tema dalam komponen.

Memisahkan komponen dan tema

Dengan menggunakan @at-root, anda boleh menjana kelas global yang bebas walaupun dari dalam kueri media. Ini memudahkan mengatur tema dan status bagi setiap komponen.

Contoh Penggunaan

 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 yang terhasil

 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}

• Dalam contoh ini, semasa mentakrif gaya untuk tema gelap di dalam .card, @at-root menjana kelas .card-dark yang berasingan. Ini membolehkan anda menukar kelas dengan fleksibel merentasi tema yang berbeza.

Nota

Apabila menggunakan @at-root, ingat perkara berikut.

1. Elakkan penggunaan berlebihan @at-root berkuasa, tetapi penggunaan berlebihan boleh mengaburi tujuan penyarangan anda.

2. Perjelas tujuan Meninggalkan ulasan tentang mengapa anda menggunakan @at-root memudahkan pembangun lain memahami.

3. Peka terhadap konsistensi skop Mengalihkan keluaran ke aras akar boleh mengubah kebergantungan gaya. Pastikan jelas elemen mana yang terpakai.

4. Gabungkan dengan ciri SASS lain Menggabungkan @at-root dengan @mixin dan @function membolehkan reka bentuk CSS yang lebih fleksibel.

Ringkasan

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

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video