CSS Preprocesory

MVOP3 WBI

Bc. Matěj Cajthaml ©

Smíchovská střední průmyslová
škola a gymnázium

icon

Proměnné v CSS

Proměnné v CSS

  • podobné jako vlastnosti
  • čteme pomocí funkce
  • začínají pomocí --
  • používáme pomocí var(--jmeno)

Ukázka proměnných v CSS

:root

  • předdefinovaný selektor
  • reprezentuje kořen dokumentu
  • používáme pro definici proměnných, které jsou k dispozici v celém dokumentu

Přepisování proměnných

  • proměnné můžeme znovu definovat v pravidlech
  • hodnoty budou k dispozici pouze v rámci tohoto pravidla a jeho potomků

Základní hodnoty

  • pokud není proměnná definována, použije se její základní hodnota
  • základní hodnotu definujeme pomocí var(--jmeno, hodnota)

Ukázka komplikovanějších proměnných v CSS

Můžeme v definici proměnné použít hodnotu z jiné proměnné?

Můžeme použít hodnotu ve složené vlasnosti? Co např. v filter?

SASS

SASS

  • = Syntactically Awesome Style Sheets
  • preprocesorový skriptovací jazyk
  • kompiluje do kaskádových stylů
  • CSS with superpowers
  • metajazyk

Syntaxe

  • dva formáty
  • Sass — formátování pomocí odrážek
  • SCSS — formátování podobné CSS

Důvod existence

  • přehlednější zápis
  • rozdělení na celky
  • využití proměnných
  • využití funkcí

Kompilace

  • zdrojové kódy .scss či .sass
  • zdrojové kódy kompilujeme pomocí sass-kompilátoru
  • zdrojový kód → použitelné CSS

Kompilátory

SASS Kompilátor

PRÁCE

Otevřete si příkazovou řádku a nainstalujte kompilátor pomocí příkazu:

npm install -g sass

Poté zadejte následující příkaz, který by Vám měl zobrazit verzi SASS kompilátoru:

sass --version

Ukázka kompilace

sass source.scss target.css
sass --no-source-map source.scss target.css
sass --watch source.scss target.css

Zápis SCSS

CSS je validní zápis v SCSS.

CSS však není validní ve formátu Sass.

Vnořování 1

Vnořování 2

Proměnné

  • uchovávají určité data
  • nezáleží nám na datovém typu
  • lze opakovaně využívat

Jaké jsou výhody proměnných?

Používání proměnných

Varování

Chybová hláška

Aktuální prvek

  • pomocí operátoru &

Práce s barvami

Komentáře

  • můžeme používat komentáře typu /* 😭 */
  • a na více // 🤠

Mixiny

Moduly

Dokumentace

https://sass-lang.com/documentation

Funkce

Práce

Najděte v dokumentaci SASSu informace o tom, jak se liší funkce a mixiny.

Jaký je rozdíl mezi CSS a SASS proměnnými?

Funkce

Funkce

  • způsob rozdělení logiky
  • přijímá parametry a vrací jednu hodnotu
  • hodí se např. na výpočty či různé nastavení

Ukázka funkcí

Mixins

Mixins

  • způsob definování funkcí které vracejí více vlastností či bloky
  • dají se vkládat do jiných selektorů
  • hodí se např. na responzivitu, opakující se kód, ...

Ukázka mixins

Cykly

Cykly

  • opakování hodnot / vlastností / bloků pro určité hodnoty
  • hodí se např. na repetetivní práci, mnoho hodnot

Ukázka opakování

Práce

LESS

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/