SCSS a AI asistence při stylování

Co SCSS umí navíc

SCSS je nadstavba nad CSS: každý platný stylopis je zároveň platné SCSS. Prohlížeč o něm neví nic – soubor se před nasazením přeloží na obyčejné CSS. Dřív to byl jediný způsob, jak si v CSS zavést proměnnou nebo pravidla zanořit. Dneska obojí umí prohlížeč sám, a tak zbývá otázka, co ještě SCSS přidává.

Proměnné, které nežijí v prohlížeči

$space: 1rem;
$radius: 8px;

.card {
  padding: $space;
  border-radius: $radius;
}

Proměnná se znakem dolaru se dosadí při překladu a ve výsledném CSS po ní není ani stopa. To je zásadní rozdíl proti vlastním vlastnostem z bloku 1.3: $space se nedědí, nedá se přepsat v podstromu a nezmění se za běhu. Zato se s ní dá počítat, větvit podle ní a skládat z ní jména.

Obojí se dá používat naráz a v praxi to tak vypadá: $ na hodnoty, které se rozhodují při psaní, -- na hodnoty, které se mají dát přepnout v prohlížeči.

Skládání jmen

Tohle je věc, kterou nativní zanořování neumí a kvůli které se se SCSS pořád potkáváme:

.card {
  padding: $space;

  &__title {
    font-size: 1.25rem;
  }

  &--warning {
    border-color: $color-danger;
  }
}

Vznikne z toho .card__title a .card--warning, tedy zápis, na kterém stojí pojmenování v BEM. Znak & je tady kus textu, se kterým se dá skládat.

Dílky

Soubor, jehož název začíná podtržítkem, se sám o sobě nepřeloží. Je to dílek (partial), který se natáhne do jiného souboru:

@use "tokens";
@use "mixins";
@use "card";

Styly se tím dají rozdělit po komponentách a prohlížeč přesto dostane jediný soubor. Nativní CSS má sice @import, ale ten stahuje soubory za běhu jeden po druhém, takže se stránka kreslí pomaleji.