Instalace SASS a Compass na MacOS

SASS je CSS preprocesor, který rozšiřuje CSS3 o další možnosti jako třeba proměnné, matematické operace a znovupoužitelné části kódu tzv. Mixins. SASS má vlastní syntaxi nad CSS, zapisuje se do souborů *.scss ze kterých nám umožňuje vygenerovat CSS soubory pro použití v našem projektu. Tyto soubory mohou být automaticky minifikované a sjednocené do jednoho například pomocí nástroje Grunt. Viz článek Kompilace Sass a Compass souborů přes Grunt JS.

Compass je CSS framework postavený na SASSu. Další frameworky jsou třeba Bourbon, nebo Susy. Díky Compassu lze snadno pracovat s CSS3, nemusíme se starat o základní reset všech prohlížečů, má podporu pro jednoduché používání sprites, vlastních písem a další.

Instalace

Protože má SASS závislosti na Ruby, instalujeme SASS a Compass přes balíčkovací systém Ruby, který se jmenuje Gems. Na MacOS je Ruby už předinstalované. Ověřit si to můžeme příkazem:

gem -v

Což vypíše verzi nainstalovaného Ruby. Nejdříve ale ověříme, že používáme systémové prostředí, pomocí:

rvm use system

Mělo by vypsat 'Now using system ruby.'. Systémové prostředí potřebujeme pro globální běh SASSu. Nyní můžeme začít instalovat přímo Compass, který má závislost na Sass, takže si ho doinstaluje samostatně:

sudo gem install compass

Samostatně lze Sass nainstalovat pomocí:

sudo gem install sass

Ověříme, že nám Sass i Compass funguje:

sass -v
compass -v

Stejným způbosem můžeme doinstalovat další doplňky, třeba sass-globbing, pro možnost používat @import:

sudo gem install sass-globbing

Nebo další CSS frameworky:

sudo gem install bourbon
sudo gem install susy

Integrace se Symfony

V rámci Symfony Assetic Bundle, který se nám stará o CSS, JS a obrázky, musíme v konfiguračním souboru /app/config/config.yml nadefinovat cestu k SASSu:

assetic:
    use_controller: false
    sass: /usr/bin/sass

Cestu k SASSu můžeme zjistit pomocí příkazu:

where sass

Parametrem use_controller nastavujeme, že nechceme aby se assety generovali při každém požadavku, což je vhodné hlavně ve vývojovém prostředí, kde není cache a vše se generuje opakovaně. Parametr nastavíme na false tedy pouze v /app/config/config_dev.yml. Nesmíme ale pak zapomenout, že když nějaký asset změníme, např. CSS soubor, musíme ho přegenerovat ručně pomocí konzole:

php app/console assetic:dump

Nebo si zapneme funkci watch, která nám bude změny souborů sledovat automaticky:

php app/console assetic:dump --watch