SASS `@at-root`

Artikel ini menjelaskan @at-root pada SASS.

Kami akan membahas semuanya mulai dari penggunaan dasar @at-root hingga contoh lanjutan, selangkah demi selangkah.

YouTube Video

Tentang SASS @at-root

@at-root adalah direktif yang disediakan SASS untuk memindahkan selektor atau properti yang bersarang dari nesting saat ini ke cakupan induk. Dengan memanfaatkan fitur ini, Anda dapat mengontrol kedalaman nesting dan menghasilkan CSS yang diinginkan dengan lebih efisien.

Penggunaan dasar @at-root

Nesting SASS membuat kode lebih mudah dibaca, tetapi nesting yang terlalu dalam dapat menghasilkan CSS yang tidak diinginkan. Dengan menggunakan @at-root, Anda dapat mengecualikan blok kode tertentu dari struktur nesting.

Sintaks Dasar

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 dikompilasi

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

• Karena @at-root, .nav-item dihasilkan di luar .nav.

@at-root pada selektor bersarang

Bahkan dalam nesting yang dalam, penggunaan @at-root memungkinkan Anda memindahkan selektor tertentu ke tingkat root. Ini memungkinkan Anda menghasilkan CSS yang terkontrol bahkan di 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 dikompilasi

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

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

@at-root dengan argumen

Dengan menentukan argumen, @at-root dapat dikendalikan dengan lebih fleksibel.

tanpa argumen

Saat Anda menggunakan argumen without, keluaran akan mengabaikan cakupan yang ditentukan. Dengan kata lain, Anda dapat menghapus aturan induk atau media query.

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 dikompilasi

1.nav__item {
2  color: red;
3}

• Dalam kasus ini, @at-root (without: media) mengecualikan cakupan media query, dan .nav__item dihasilkan pada tingkat root.

dengan argumen

Menggunakan with hanya mempertahankan cakupan yang ditentukan dalam keluaran. Berguna saat Anda ingin menghasilkan ke root sambil mempertahankan cakupan 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 dikompilasi

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

• @at-root (with: media) memindahkan selektor ke root sambil mempertahankan struktur media query.

Menentukan beberapa kondisi

Anda juga dapat menentukan beberapa cakupan sekaligus, dipisahkan dengan spasi.

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 dikompilasi

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

• Dalam contoh ini, rule (selektor biasa) dan media (media query) keduanya dikecualikan, sehingga .global-style tidak termasuk dalam cakupan mana pun dan sepenuhnya dihasilkan pada tingkat root. Ini berguna ketika Anda ingin dengan sengaja mendefinisikan gaya global bahkan di dalam nesting yang kompleks.

Menggabungkan dengan media query

Dengan menggunakan @at-root, Anda dapat menghasilkan gaya pada tingkat root dari dalam media query. Ini memungkinkan Anda mendefinisikan desain responsif pada tingkat 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 dikompilasi

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

• Dengan @at-root, Anda juga dapat menghasilkan gaya tingkat root dari dalam media query. Ini memudahkan Anda mendefinisikan gaya global yang independen untuk setiap breakpoint.

Kasus penggunaan @at-root

@at-root berguna ketika Anda ingin menghasilkan gaya pada tingkat root dalam kondisi tertentu. Ini sangat membantu saat menangani media query atau gaya khusus tema di dalam komponen.

Memisahkan komponen dan tema

Dengan menggunakan @at-root, Anda dapat menghasilkan kelas global yang independen bahkan dari dalam media query. Ini memudahkan pengorganisasian tema dan status per 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 dikompilasi

 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, saat mendefinisikan gaya untuk tema gelap di dalam .card, @at-root menghasilkan kelas .card-dark yang terpisah. Ini memungkinkan Anda mengganti kelas secara fleksibel di berbagai tema.

Catatan

Saat menggunakan @at-root, perhatikan poin-poin berikut.

1. Hindari penggunaan berlebihan @at-root itu kuat, tetapi penggunaan berlebihan dapat mengaburkan maksud nesting Anda.

2. Perjelas maksud Menambahkan komentar tentang alasan Anda menggunakan @at-root memudahkan pengembang lain untuk memahami.

3. Perhatikan konsistensi cakupan Memindahkan keluaran ke root dapat mengubah dependensi gaya. Pastikan jelas elemen mana yang diterapkan.

4. Gabungkan dengan fitur SASS lainnya Menggabungkan @at-root dengan @mixin dan @function memungkinkan perancangan CSS yang lebih fleksibel.

Ringkasan

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

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video