For hvert år som går føler jeg at CSS stadig blir bedre og jeg har sett mindre og mindre grunn til å bruke pre-processors som Less eller Sass. Det eneste som har holdt meg tilbake har vært å kunne skrive nøstede CSS-regler slik at jeg slipper å gjenta meg selv om og om igjen.

Det er derfor jeg på selveste juleaften vil fortelle om min nye favorittegenskap i CSS som nå faktisk er støttet av alle moderne nettlesere, og det er støtte for nøsting!

Hvis man har vært borti nøsting i Less eller Sass så fungerer det ganske likt. Man kan bruke &-tegnet for å referere til scopet man er i. Hvis man ikke har med &-tegnet så vil nøstingen legge til mellomrom mellom CSS-reglene.

Det vil si at

.parent-rule {
  /* */
  .child-rule {
    /* */
  }
}

er det samme som

.parent-rule {
  /* */
}

.parent-rule .child-rule {
  /* */
}

Mens hvis man bruker samme regel, bare med & så vil tilsvarende

.parent-rule {
  /* */
  &.child-rule {
    /* */
  }
}

nå tilsvare

.parent-rule {
  /* */
}

.parent-rule.child-rule {
  /* */
}

Enda en mindre grunn til å bruke en pre-processor. Takk for alt Less og Sass. God jul!