SASS `@at-root`

Den här artikeln förklarar SASS:s @at-root.

Vi går igenom allt från grundläggande användning av @at-root till avancerade exempel, steg för steg.

YouTube Video

Om SASS @at-root

@at-root är ett direktiv som tillhandahålls av SASS och används för att flytta nästlade selektorer eller egenskaper från den aktuella nästlingen till överordnat scope. Genom att utnyttja denna funktion kan du kontrollera nästlingsdjupet och generera avsedd CSS mer effektivt.

Grundläggande användning av @at-root

SASS:s nästling gör koden mer lättläst, men alltför djup nästling kan leda till att oavsiktlig CSS genereras. Med @at-root kan du undanta specifika kodblock från nästlingsstrukturen.

Grundläggande syntax

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

Exempel på användning

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

Kompilerad CSS

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

• Tack vare @at-root genereras .nav-item utanför .nav.

@at-root i nästlade selektorer

Även i djup nästling kan du med @at-root flytta specifika selektorer till rotnivån. Detta gör att du kan generera kontrollerad CSS även i komplexa strukturer.

Exempel på användning

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

Kompilerad CSS

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

• Med @at-root genereras .card-title utanför .card-header.

@at-root med argument

Genom att ange argument kan @at-root styras mer flexibelt.

argumentet without

När du använder argumentet without ignorerar utdata de angivna scopen. Med andra ord kan du ta bort överordnade regler eller media queries.

Exempel på användning

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

Kompilerad CSS

1.nav__item {
2  color: red;
3}

• I det här fallet utesluter @at-root (without: media) media query-scope, och .nav__item genereras på rotnivå.

argumentet with

Med with behålls endast de angivna scopen i utdata. Användbart när du vill skriva ut till roten samtidigt som du bevarar specifika scopen.

Exempel på användning

 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}

Kompilerad CSS

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

• @at-root (with: media) flyttar selektorn till roten samtidigt som media query-strukturen bevaras.

Specificera flera villkor

Du kan också ange flera omfång samtidigt, separerade med mellanslag.

Exempel på användning

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

Kompilerad CSS

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

• I det här exemplet utesluts både rule (vanliga selektorer) och media (media queries), så .global-style tillhör inget scope och genereras helt på rotnivå. Detta är användbart när du avsiktligt vill definiera globala stilar även i komplex nästling.

Kombinera med media queries

Genom att använda @at-root kan du generera stilar på rotnivå inifrån mediefrågor. Detta gör att du kan definiera responsiv design på komponentnivå.

Exempel på användning

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

Kompilerad CSS

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

• Med @at-root kan du också generera rotnivåstilar inifrån media queries. Det gör det enkelt att definiera oberoende globala stilar för varje brytpunkt.

Användningsfall för @at-root

@at-root är praktiskt när du vill generera stilar på rotnivå under specifika förutsättningar. Det är särskilt hjälpsamt när du hanterar media queries eller temaspecifika stilar inuti komponenter.

Att separera komponenter och teman

Med @at-root kan du generera fristående globala klasser även inifrån media queries. Det gör det enklare att organisera teman och tillstånd per komponent.

Exempel på användning

 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}

Kompilerad 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}

• I det här exemplet, samtidigt som du definierar stilar för det mörka temat inuti .card, genererar @at-root en separat .card-dark-klass. Detta låter dig växla klasser flexibelt mellan olika teman.

Anteckningar

När du använder @at-root, tänk på följande punkter.

1. Undvik överanvändning @at-root är kraftfullt, men överanvändning kan dölja avsikten med din nästling.

2. Tydliggör avsikt Att lämna kommentarer om varför du använder @at-root gör det lättare för andra utvecklare att förstå.

3. Var uppmärksam på konsekvens i scope Att flytta utdata till roten kan förändra stilberoenden. Var tydlig med vilka element den gäller för.

4. Kombinera med andra SASS-funktioner Att kombinera @at-root med @mixin och @function möjliggör mer flexibel CSS-design.

Sammanfattning

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

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video