Moderné CSS s Sass – praktický tutoriál

Vďaka predspracovateľom CSS je možné písať CSS oveľa efektívnejšie. Čo sú tieto predspracovatele, aké existujú a prečo bola voľba v tomto prípade natočená na Sass, ukazuje toto video.

Predtým než môžete použiť Sass, musíte ho nainštalovať. A predpokladom pre to je Ruby. Oboje - teda inštalácia Ruby a Sass - sa ukazuje v tomto videu. Potom môžete hneď otestovať, či inštalácia SASS skutočne fungovala.

Sass- je potrebné premeniť na CSS súbory, aby sa skutočne dali používať. Vďaka príkazu Watch môžete veľmi ľahko zistíť zmeny v jednotlivých súboroch alebo v celých adresároch.

Pomocou @import môžete importovať a zlúčiť súbory SCSS. Je to aspekt tohto videa, ktorý súvisí s predom umiestneným podčiarknutím v názve súboru.

V Sasse je možnosť deklarácie premenných. Tento koncept nie je k dispozícii v tradičnom CSS, ale v Sasse je geniálnym prostriedkom pre efektívny vývoj štýlových súborov.

Vďaka vnoreniam je syntax Sass oveľa kompaktnejšia, ako je to bežné v CSS. Vnáranie vám navyše pomáha písať kód oveľa prehľadnejšie.

Použitie @extend vám umožňuje preniesť súbor CSS vlastností od jedného selektoru k inému. Taktiež to pomáha udržiavať súbory Sass čisté.

Selektor zástupcov umožňuje definovanie modulov. Táto modulárnosť umožňuje rozdelenie Sass syntaxe do logických blokov, ktoré možno integrovať na rôznych miestach.

Mixiny sú funkcie, s ktorými je možné výrazne zjednodušiť pracovné postupy. V tomto videu sa ukáže, ako môžete definovať vlastné mixiny a nakoniec ich použiť.

So selektorom, o ktorom je reč v tomto videu, môžete pristupovať k nadradenému elementu prvku. Tento selektor v CSS zreteľne neexistuje a preto prináša obrovskú pridanú hodnotu.

Sass umožňuje použitie for-cyklov. To funguje v Sass veľmi jednoducho a môže byť použité napríklad na definovanie vlastného mriežkového systému.

Okrem For- sa v Sass tiež dajú použiť Each- a While-cykly. Ako to môže byť využité pri automatizácii, ukazuje toto video.

V jazykoch ako PHP a JavaScript je možnosť reagovať na rôzne udalosti pomocou if a else. Takáto možnosť existuje aj v Sass. Ako to môžete využiť, ukazuje toto video.

Môžete počítať v Sass. Je to praktické napríklad pri definovaní veľkosti písma. Vďaka príslušným operátorom si však môžete vytvoriť aj vlastný mriežkový systém.

Samozrejme je možné definovať farby v Sasse. No Sass ide v tomto smere oveľa ďalej než tradičné CSS. Vďaka príslušným funkciám je možné napríklad jednoducho manipulovať s farbami.

Framework Compass rozširuje možnosti pre Sass ešte viackrát. Toto prvé video ukazuje, ako môžete nainštalovať a použiť Compass.

Webová stránka projektu Compass je hlavným informačným prostriedkom, pokiaľ ide o prácu s touto platformou. Ukážem vám na príklade CSS3 funkcií od Compass, ako môžete pracovať s dokumentáciou.

Príklad ukazuje, ako jednoducho sa dá s Compass realizovať. Na konci tohto radu sa tiež pozrieme na alternatívny Sass framework. Susy ponúka štíhly grid systém.