Lekce 1.5

SCSS a AI asistence při stylování

Preprocesor, který se pořád vyplatí, poctivé srovnání tří cest ke vzhledu a práce s asistentem, jejíž nejdůležitější částí je kontrola.

Shrnutí

SCSS dneska neřeší to, kvůli čemu vzniklo – proměnné a zanořování umí prohlížeč sám. Zůstává kvůli skládání jmen, mixinům a generování. Asistent zrychlí psaní, odpovědnost za kód ale nechává na nás.

Zápis K čemu je
$space: 1rem hodnota dosazená při překladu, v CSS po ní není stopa
&__title skládání jmen, které nativní zanořování neumí
@use "tokens" připojení dílku, tedy souboru s podtržítkem
@mixin a @include pojmenovaný kus deklarací, který se kopíruje
@each vygenerovaná řada tříd
#{$name} vložení hodnoty do jména selektoru

Umím?

  • Řeknu rozdíl mezi $promenna a --promenna a vyberu tu správnou.
  • Rozdělím stylopis na dílky a připojím je přes @use.
  • Napíšu mixin s parametrem a vím, že se ve výsledku kopíruje.
  • Zdůvodním u konkrétního projektu, jestli sáhnu po nativním CSS, Tailwindu, nebo SCSS.
  • Napíšu asistentovi zadání s kontextem, jednou úlohou a hranicemi.
  • Zkontroluju výstup v prohlížeči i v dokumentaci a vysvětlím každý řádek, který odevzdávám.