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

  • dvě verze
  • 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é kody .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

příkaz 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

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

Komentáře

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

Funkce

Dokumentace

https://sass-lang.com/documentation

Společná práce

Mapy a listy v CSS

PRÁCE

Najděte v dokumentaci co jsou to mapy a listy v SASS. Jak se liší? Jak se používají? Zkuste je použít.

Instalace softwaru

PRÁCE

https://ssps.cajthaml.eu/3-mvop-wbf/work/17-instalace-software

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/