SASS `@at-root`

Ipinapaliwanag ng artikulong ito ang @at-root ng SASS.

Tatalakayin natin, hakbang-hakbang, ang lahat mula sa pangunahing paggamit ng @at-root hanggang sa mga advanced na halimbawa.

YouTube Video

Tungkol sa SASS @at-root

Ang @at-root ay isang direktiba na ibinibigay ng SASS na ginagamit upang ilipat ang mga naka-nest na selector o property mula sa kasalukuyang nesting patungo sa parent scope. Sa paggamit ng tampok na ito, maaari mong kontrolin ang lalim ng nesting at makabuo ng ninanais na CSS nang mas episyente.

Pangunahing paggamit ng @at-root

Ginagawang mas mababasa ng nesting ng SASS ang code, ngunit ang sobrang lalim na nesting ay maaaring makabuo ng hindi inaasahang CSS. Sa paggamit ng @at-root, maaari mong hindi isama ang mga partikular na bloke ng code sa istruktura ng nesting.

Pangunahing Syntax

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

Halimbawa ng Paggamit

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

Na-compile na CSS

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

• Dahil sa @at-root, ang .nav-item ay inilalabas sa labas ng .nav.

@at-root sa mga naka-nest na selector

Kahit sa malalim na nesting, nagbibigay-daan ang paggamit ng @at-root na ilipat ang mga partikular na selector sa antas ng root. Dahil dito, maaari kang maglabas ng kontroladong CSS kahit sa loob ng masalimuot na mga istruktura.

Halimbawa ng Paggamit

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

Na-compile na CSS

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

• Sa paggamit ng @at-root, ang .card-title ay inilalabas sa labas ng .card-header.

@at-root na may mga argumento

Sa pagtukoy ng mga argumento, mas may kakayahang umangkop mong makokontrol ang @at-root.

argumentong without

Kapag ginamit mo ang argumentong without, binabalewala ng output ang mga tinukoy na scope. Sa madaling sabi, maaari mong alisin ang mga parent rule o mga media query.

Halimbawa ng Paggamit

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

Na-compile na CSS

1.nav__item {
2  color: red;
3}

• Sa kasong ito, inaalis ng @at-root (without: media) ang saklaw ng media query, at ang .nav__item ay inilalabas sa root.

argumentong with

Ang paggamit ng with ay nag-iiwan lamang ng mga tinukoy na scope sa output. Kapaki-pakinabang kapag gusto mong maglabas sa root habang pinananatili ang partikular na mga scope.

Halimbawa ng Paggamit

 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}

Na-compile na CSS

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

• Inililipat ng @at-root (with: media) ang selector sa root habang pinananatili ang istruktura ng media query.

Pagtukoy ng maramihang kondisyon

Maaari mo ring tukuyin ang maraming saklaw nang sabay-sabay, na pinaghihiwalay ng mga puwang.

Halimbawa ng Paggamit

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

Na-compile na CSS

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

• Sa halimbawang ito, parehong inaalis ang rule (karaniwang mga selector) at media (mga media query), kaya ang .global-style ay hindi nabibilang sa anumang scope at ganap na inilalabas sa antas ng root. Kapaki-pakinabang ito kapag nais mong sadyang magtakda ng mga global na estilo kahit sa loob ng kumplikadong nesting.

Pagsasama sa mga media query

Gamit ang @at-root, maaari kang maglabas ng mga istilo sa antas na root mula sa loob ng mga media query. Pinapahintulutan ka nitong tukuyin ang responsive design sa antas ng component.

Halimbawa ng Paggamit

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

Na-compile na CSS

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

• Gamit ang @at-root, maaari ka ring maglabas ng mga estilong nasa antas ng root mula sa loob ng mga media query. Pinadadali nitong tukuyin ang mga hiwalay na global na estilo para sa bawat breakpoint.

Mga kaso ng paggamit ng @at-root

Kapaki-pakinabang ang @at-root kapag nais mong maglabas ng mga estilo sa antas ng root sa ilalim ng mga tiyak na kondisyon. Lalo itong nakatutulong kapag humahawak ng mga media query o mga estilong partikular sa tema sa loob ng mga component.

Paghiwalay ng mga component at mga tema

Sa paggamit ng @at-root, maaari kang bumuo ng mga hiwalay na global na klase kahit mula sa loob ng mga media query. Mas napapadali nito ang pag-aayos ng mga tema at mga estado kada component.

Halimbawa ng Paggamit

 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}

Na-compile na CSS

 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}

• Sa halimbawang ito, habang tinutukoy ang mga estilo para sa dark theme sa loob ng .card, lumilikha ang @at-root ng hiwalay na klaseng .card-dark. Pinapahintulutan ka nitong magpalit ng mga klase nang may kakayahang umangkop sa iba't ibang tema.

Mga Tala

Kapag gumagamit ng @at-root, tandaan ang mga sumusunod na punto.

1. Iwasan ang labis na paggamit Makapangyarihan ang @at-root, ngunit ang sobrang paggamit nito ay maaaring magpalabo sa layunin ng iyong nesting.

2. Linawin ang layunin Ang pag-iwan ng mga komento kung bakit mo ginagamit ang @at-root ay nagpapadali para sa ibang mga developer na makaunawa.

3. Maging maingat sa pagkakapare-pareho ng scope Ang paglipat ng output sa root ay maaaring magbago ng mga dependency ng estilo. Maging malinaw kung sa aling mga elemento ito ilalapat.

4. Pagsamahin sa iba pang mga tampok ng SASS Ang pagsasama ng @at-root sa @mixin at @function ay nagbibigay-daan sa mas may kakayahang umangkop na disenyo ng CSS.

Buod

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

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video