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í 2

Mixiny – pokračování

Co si vyzkoušíte

Rozdělíte hodnoty na ty, které se rozhodují při psaní, a na ty, které se mají dát přepnout v prohlížeči. Vycházíte z projektu, který jste právě rozdělili na dílky.

Zadání

  1. Projděte proměnné v _tokens.scss a rozhodněte u každé, jestli se má za běhu měnit.
  2. Ty, které se měnit mají, převeďte na vlastní vlastnosti na :root.
  3. Ostatní nechte jako proměnné se znakem dolaru a napište si komentářem proč.
  4. Přidejte tmavý motiv, který přepíše jen vlastní vlastnosti.
  5. Zkuste tmavý motiv napsat přes proměnné se znakem dolaru a zjistěte, proč to nejde.

Bonus

  1. Napište mixin, který podle parametru vygeneruje světlou i tmavou variantu komponenty.
  2. Porovnejte oba přístupy na velikosti výsledného CSS.