Blog image

Nástroje vývojáře - SASS/SCSS/CSS

publikoval Krowi

18.11.2018

Modernizace vývoje - SASS (obsah připravený pro potřeby vývojového týmu, ve kterém v současné době působím)

Tématika SASS/SCSS je velmi úzce spjatá s NPM - balíčkovacím manažerem, kterému je věnován samostatný článek. Není od věci, projít si základní příkazy.

Užitečné odkazy

Před několika lety, když jsem zjišťoval, jakým směrem se ubírat v oblasti IT, tak jeden z několika pokusů také patřil tématu SASS. Tehdá jsem neměl žádné zkušenosti a znalosti v Designu & Kódování (ono se toho bohužel moc nezměnilo za ty léta), ale nyní když si to tak přebírám, tak preprocessor SASS vnímám, že má blíž k programování a působí více funkčně.

První vlastností, která se mi zpětně vybavuje, je Proměnná. Jako programátor s minimální znalostí Designu & Kódování považuji proměnné za samozřejmost. Jak je vůbec možné pracovat bez proměnným v IT? Další tři vlastnosti, které se mi zpětně vybavují jsou Mixins, Import a Prefix. Samozřejmě, i v klasickém CSS můžeme importovat, nicméně až v SCSS jsem se setkal s metodikou návrhu struktury a rozdělení na Partials.

Co to je preprocessor?

Věřím, že pouček na Internetu je nesčetně mnoho. Z mého pohledu vnímám preprocessor jako takový překladač/převaděč, který převádí/kompiluje předdefinovaný/očekávaný vstup na předdefinovaný výstup.

Význam a rozdíl mezi SASS a SCSS

Jak oficiální zdroj uvádí, tak SASS je zkratkou pro Syntactically Awesome StyleSheets. Zatímco, zkratka SCSS znamená SASSY CSS, dalo by se říct, že SCSS je takové CSS na sterojdech, syntaxe se téměř nemění oproti klasickému CSS. Na druhou stranu, syntaxe SASS se liší výrazně. SASS vypouští středníky a závorky. Soustředí se na odsazení (indentations) a vnořování (nesting).

Proč SASS (SCSS)?

  • Zjednodušuje a urychluje vývoj
  • Mnoho vlastností, které rozšiřují klasické CSS
  • Jednoduchá syntaxe (v SCSS téměř srovnatelná s CSS)
  • Mnoho frameworků již využívá preprocessor SASS
  • Ověřený lety používání, silná základna komunity a podpory
  • Odstranění redundance

V současné době se můžeme z oficiálních zdrojů SASS dozvědět, že jsou oficiálně dostupné tři implementace.

Implementace RUBY SASS

iworklab/example-sass

Začal bych s RUBY SASS, který byl původní implementací SASSU a stejně tak byl první implementací, se kterou jsem se setkal před lety. Každopádně RUBY SASS byl odstaven a brzy již nebude podporován. Nástupcem se stává DART SASS!

Stále je možné si RUBY SASS vyzkoušet, jen tak z okraje. Instalace vyžaduje mít nainstalovaný Ruby. A s pomocí RubyGems stáhnout a nainstalovat rozšíření/balíček RUBY-SASS.

Instalace Ruby na lokální stroj

ruby -v

RubyGems příkaz na instalaci SASS (sudo)

gem install sass

SASS příkaz na kompilaci a sledování vybraných souborů

sass --watch styles.sass:styles.css (vstupní soubor s příponou .sass : výstup v podobě .css)

Implementace DART SASS

Osobně jsem se zatím neměl kapacitu a čas se této implementaci DART SASS věnovat. Na toto téma bude publikován samostatný příspěvek.

Knihovna DART SASS je napsána v javascriptu, zatímco LibSass je napsána v C/C++. Závěrem lze říct, že LibSass bude ve většině případech rychlejší.

Implementace LibSass 

Neboť LibSass je jen knihovna, tak může být implementována/zabalena do mnoha jazyků (wrappers). Gulp SASS, který je pouze rozšířením Gulp, má Node SASS (Wrapper Node) jako závislost. Na pozadí Gulp běží Nodemon, který stále hází očkem na vybrané soubory a sleduje změny nad soubory. Nodemon se běžně používá při vývoji Node.js aplikace (serverside).

1. Node-sass

iworklab/example-sass-node

Node-sass je knihovna, která se váže na Node.js a LibSass (C verzipreprocesoru Sass). V případě této knihovny bych volil instalaci globální pro snadnější použití CLI.

npm install node-sass -g

Smyslem knihovny je kompilace SCSS souborů na CSS, čehož můžeme docílit příkazy (předpokládáme-li, že máme adresář 'scc' a adresář 'scss'):

node-sass -o css scss/main.scss
node-sass -o css scss

Volání výše zmíněného příkazu se může stát po několika minutách dosti frustrující záležitostí a proto lze kompilaci volat na pozadí, automaticky při každé změně - díky Nodemon, který už je součástí/závislostí balíčku.

node-sass -o css scss -w

1.1 Node-minify

iworklab/example-sass-node

Tento balíček není zas tak úplně o SASS, ale jako spíš o automatizaci - umožňuje kompresi souborů JavaScriptu, CSS a HTML. Všechny dostupné komilační procedury najdete na node-minify + CLI.

Dostupné nastavení balíčku (CLI)

node-minify

1.2. Node-sass CLI/API

iworklab/example-api-cli

V dnešní době se už nevyplácí, jak se říká "vymýšlet kolo" a to platí hlavně při vývoji. Vývoj webové aplikací lze automatizovat a to za pomocí různých nástrojů, které usnadňují vývoj v podobě generování/kompilování kódu, automatizace opakujících se úkolů jako je právě kompilace SASS, minifikace CSS/JS či třeba i optimalizace obrázků.

Registrace NPM scriptu.

"compile-css": "node-sass --include-path scss scss/main.scss public/css/main.css"

Doplňuící NPM script zahrnující předešlou funkci (Node příkaz může být stejný, jak je uvedeno výše) a zřetězená na Nodemon monitor

"watch-css": "nodemon -e scss -x \"npm run build-css\""

NPM run (script) příkaz

npm run < script >

Další možností je využití Node-sass API, která již vychází ze syntaxe Node.js a moderního javascriptu. Využívá Node.js modul pro Filesystem (jak stojí v dokumentaci, render nezapisuje) a Path modul.

1.3 Gulp-sass

(Připravuje se)