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.

Cvičení 1

Mixiny

Co si vyzkoušíte

Rozdělíte jeden dlouhý stylopis na dílky a vytáhnete z něj opakování do mixinu. Ve výchozím stavu máte projekt s nastaveným překladem SCSS a jediný soubor main.scss, ve kterém je všechno pohromadě.

Zadání

  1. Rozdělte main.scss na dílky _tokens.scss, _card.scss a _nav.scss a připojte je přes @use.
  2. Přesuňte do dílku s tokeny všechny opakující se hodnoty jako proměnné se znakem dolaru.
  3. Najděte deklarace, které se opakují u karty i u panelu, a vytáhněte je do mixinu.
  4. Dejte mixinu parametr s výchozí hodnotou a jedno z použití zavolejte s jinou.
  5. Přepište zanořená pravidla karty na skládaná jména přes &__ a &--.
  6. Otevřete vygenerované CSS a najděte v něm místo, kde se deklarace z mixinu opakují.

Bonus

  1. Vygenerujte cyklem @each řadu pomocných tříd pro mezery.
  2. Zjistěte, o kolik se tím vygenerovaný soubor zvětšil, a rozmyslete si, jestli se to vyplatí.