sass
Nesting

Grundläggande häckning

När du förklarar en ny regel inom en annan regel kallas det häckning. Med grundläggande häckning, som visas nedan, kommer den kapslade väljaren att sammanställas som en ny CSS-väljare med alla dess föräldrar förberedda, separerade med ett mellanslag.

// SCSS
.parent {
  margin: 1rem;

  .child {
    float: left;
  }
}

// CSS output
.parent {
  margin: 1rem;
}

.parent .child {
  float: left;
}

Häckningsdjup

Häckning är en mycket kraftfull funktion, men bör användas med försiktighet. Det kan hända ganska enkelt och snabbt att du börjar häcka och fortsätter att inkludera alla barn i ett bo, i ett bo, i ett bo. Låt mig visa:

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// CSS output of the last rule
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

problem

specificitet

li från exemplet ovan har en margin . Låt oss säga att vi vill åsidosätta detta i en mediefråga senare.

@media (max-width: 480) {

  // will not work
  .dropdown-list ul li {
    margin: 0;
  }

  // will work
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

Så genom att häcka för djupt måste du häcka djupt igen när du vill skriva över ett visst värde. Ännu värre är det ofta där regeln !important kommer att användas.

@media (max-width: 480) {

  // BIG NO-NO, don't do this
  .dropdown-list ul li {
    margin: 0 !important;
  }

Varför är !important regeln är en dålig idé

Du bör skriva din SCSS på ett bra sätt att dessa lösningar inte ens är nödvändiga i första hand. Att använda !important sådan mindre fråga redan kommer att leda dig ner i ett kaninhål!

återanvändning

Detta är ganska lika med specificitetsproblemet, men värt att påpeka separat. Om du utformar något som en knapp eller till och med en nedrullningsbar kanske du vill återanvända dessa stilar någon annanstans på din sida.

Genom att häcka för djupt är dina stilar bara bundna till elementen som sitter i den yttersta föräldern (elementet överst på ditt SCSS). Detta leder till att du kan kopiera stilar och klistra in dem någon annanstans igen. Eventuellt i en annan kapslad regel.

Dina formatmallar blir större och större och svårare att underhålla.

Hur djupt ska du bo?

De flesta styleguider anger maxdjupet till 2. Detta är bra råd i allmänhet, eftersom det bara är mycket få tillfällen där du vill häcka djupare. Merparten av tiden räcker 2.

Häckar med @ at-root

Häckning används förmodligen oftast för att skapa mer specifika väljare, men det kan också användas helt enkelt för kodorganisation. Med hjälp av @at-root direktivet kan du "hoppa ut" där du bo det i din Sass, vilket tar dig tillbaka på högsta nivå. Genom att göra detta kan du hålla stilar grupperade utan att skapa mer specificitet än du behöver.

Till exempel kan du göra något liknande:

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

Det skulle kompilera till detta:

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

Genom att göra detta är alla våra stilar relaterade till .item klassen tillsammans i SCSS, men vi behöver inte nödvändigtvis den klassen i alla väljare.

Exklusive sammanhang

Som standard kommer deklarationer inuti @at-root att visas i alla sammanhang. Detta innebär att regler inom ett @media block till exempel kommer att förbli där.

@media print {
  .item-wrapper {
    @at-root {
      .item {
        background: white;
      }
    }
  }
}

// Will compile to
@media print {
  .item {
    background: white;
  }
}

Detta är inte alltid önskat beteende, så du kan utesluta mediesammanhanget genom att skicka media till det without alternativet i @at-root direktivet.

@at-root (without: media) {..

Mer information finns i den officiella dokumentationen

Förälderväljaren (&)

Häckning är bra för att hålla relaterade väljare ihop för att göra det lättare för framtida utvecklare att förstå din kod. Förälderväljaren, representerad av en ampersand ("&") kan hjälpa till att göra det i mer komplexa situationer. Det finns flera sätt det kan användas på.

Skapa en ny väljare som kräver både förälderväljaren och en annan på samma element genom att placera den nya väljaren direkt efter en överordnad väljare.

// SCSS
.parent {

  &.skin {
    background: pink;
  }
}

// CSS output
.parent.skin {
  background: pink;
}

Låt föräldern visas efter en kapslad väljare i den sammanställda CSS genom att placera överordnade väljaren efter den kapslade väljaren.

// SCSS
.parent {

  .wrapper & {
    border: 1px solid black;
  }
}

// CSS output
.wrapper .parent {
  border: 1px solid black;
}

Stater och pseudo-element

Förutom att använda häckning för klasser och barn, är häckning med förälderväljaren också vanligt för att kombinera tillstånden för :active :hover och :focus för länkar.

// SCSS
a {
  color: blue;

  &:active,
  &:focus {
    color: red;
  }

  &:visited {
    color: purple;
  }
}

// CSS output
a {
  color: blue;
}

a:active,
a:focus {
  color: red;
}

a:visited {
  color: purple;
}

På samma sätt kan du utforma pseudoelement genom att bygga bo med förälderväljaren.

// SCSS
.parent {

  &::after {
    display: table;
    clear: both;
    content: '';
  }

  &::only-child {
    font-weight: bold;
  }
}

// CSS output
.parent::after {
  display: table;
  clear: both;
  content: '';
}

.parent::only-child {
  font-weight: bold;
}

Häckningsegenskaper

Vissa CSS-egenskaper tillhör ett namn, t ex border-right tillhör border namespace. För att skriva mindre kan vi använda fastighetshäckning och hoppa över dessa prefix, även på flera nivåer.

Om vi behövde skapa en gräns till höger och vänster för en klass med namnet .borders vi kunna skriva detta:

 //SCSS
 .borders {
    border: 2px dashed blue;
    border: {
        left: 1px solid black;
        right: 1px solid red;
    }
  }

 // CSS output 
 .borders {
    border: 2px dashed blue;  
    border-left: 1px solid black;
    border-right: 1px solid red;
  }
 

Detta sparar oss att behöva skriva border-right och border-left , men vi skriver fortfarande repetitiva koder med raderna 1px solid black och 1px solid red . Vi kan skriva ännu mindre repetitiva CSS med följande:

// SCSS
.borders {
  border: 2px dashed blue {
    left: 1px solid black;
    right: {
      color: red;
    }
  }
}

// CSS output
.borders {
   border: 2px dashed blue;
   border-left: 1px solid black;
   border-right-color: red;
}