SASS

18. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

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é

  • již znáte z PVA (spíše WBA 😎)
  • 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

Moduly

@import je již zastaralý a měl by se využívat @use, viz. ZDE.

Komentáře

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

Mixiny

Dokumentace

https://sass-lang.com/documentation

Funkce

Práce

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

Společná práce

Shrnutí

Co je to Node.js a npm?
Co je to SASS?
Je CSS validní SASS zápis?
Co je to @mixin v SASS? K čemu slouží?

Děkuji za pozornost!

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