SCSS a AI asistence při stylování

Mixiny, funkce a cykly

Zbytek SCSS je v jádru jeden nápad: psát CSS programem. Nejvíc se z toho používá mixin – pojmenovaný kus deklarací, který se dá vložit kamkoli.

@mixin surface($radius: 8px) {
  background: $color-surface;
  border: 2px solid $color-border;
  border-radius: $radius;
}

.card {
  @include surface;
}

.dialog {
  @include surface(16px);
}

Parametr může mít výchozí hodnotu, takže se dá volat s ním i bez něj.

Mixin se kopíruje, nesdílí. Ve zdroji je na jednom místě, ve výsledném CSS stojí tytéž deklarace u každého použití znovu. U tří komponent to nikdo nepozná, u třiceti se to na velikosti souboru projeví.

Cykly

Opakující se řady tříd se dají vygenerovat:

$spaces: (1: 0.25rem, 2: 0.5rem, 4: 1rem);

@each $name, $value in $spaces {
  .p-#{$name} {
    padding: $value;
  }
}

Zápis #{...} vloží hodnotu do jména selektoru. Vznikne z toho .p-1, .p-2 a .p-4 – a je to přesně princip, na kterém stojí Tailwind. Rozdíl je v tom, že Tailwind vygeneruje jen ty třídy, které jsou v projektu doopravdy použité.

Větvení

@mixin button($variant: solid) {
  @if $variant == outline {
    background: transparent;
    border: 2px solid currentColor;
  } @else {
    background: $color-action;
    color: white;
  }
}

Podmínka se vyhodnotí při překladu, ne v prohlížeči. Do výsledného CSS se dostane jen ta větev, která vyhrála.