Moderní CSS s Sass - praxí kurz

Díky předzpracovatelům CSS lze psát CSS mnohem efektivněji. Co jsou tyto předzpracovatele, které existují, a proč volba v této řadě padla na Sass, ukazuje toto video.

Předtím než může být Sass použit, musí být nainstalován. A předpokladem je Ruby. Oba kroky - instalace Ruby a Sass - jsou ukázány v tomto videu. Poté můžete hned zkusit, zda instalace Sass skutečně proběhla úspěšně.

Sass musí být převedeny do CSS souborů, aby byly skutečně použitelné. Díky příkazu Watch můžete snadno sledovat změny v jednotlivých souborech nebo v celých adresářích.

Pomocí příkazu @import je možné importovat a sloučit soubory SCSS. Jaký význam má podtržítko na začátku názvu souboru, je jedním z aspektů tohoto videa.

V Sassu je možnost deklarovat proměnné. Tento koncept není v běžném CSS dostupný, ale v Sassu je skvělým nástrojem pro efektivní vývoj stylopisů.

Díky vnořování lze syntaxi Sass udržovat mnohem elegantnější než je obvyklé v CSS. Vnořování vám navíc pomáhá psát kód mnohem přehledněji.

Použití @extend vám umožní předat sadu CSS vlastností z jednoho selektoru do druhého. To také pomáhá udržovat soubory Sass pod kontrolou.

Selektor zástupce umožňuje definici modulů. Toto modulární rozdělení umožňuje rozdělení Sass syntaxe do logických bloků, které lze začlenit na různé místa.

Mixin jsou funkce, které umožňují výrazně zjednodušit pracovní postupy. V tomto videu se ukáže, jak definovat vlastní mixin a nakonec jej použít.

S tímto selektorem, o kterém je řeč v tomto videu, můžete přistupovat k nadřazenému prvku prvku. Tento selektor v CSS samozřejmě neexistuje a proto představuje obrovskou přidanou hodnotu.

Sass umožňuje použití for smyček. To funguje v Sass velmi snadno a může být například využito k definování vlastního mřížkového systému.

V Sassu mohou být kromě "For" použity také cykly "Each" a "While". Jak to lze využít k automatizaci, ukazuje toto video.

V jazycích jako PHP a JavaScript je možnost reagovat na různé události pomocí if a else. Tento prvek je také k dispozici v Sass. Jak toho využít, ukazuje toto video.

Můžete počítat v Sassu. To je praktické zejména v oblasti definice velikosti písma. Díky odpovídajícím operátorům však můžete také vytvořit svůj vlastní mřížkový systém.

Samozřejmě lze v Sass definovat barvy. Sass však jde v tomto směru daleko dál než běžné CSS. Díky odpovídajícím funkcím je například velmi snadné manipulovat s barvami.

Framework Compass rozšiřuje možnosti Sass o mnoho násobků. Tento první video ukazuje, jak můžete nainstalovat a používat Compass.

Webová stránka projektu Compass je hlavním informačním zdrojem pro práci s tímto frameworkem. Ukážu vám na příkladech funkcí CSS3 od Compass, jak můžete pracovat s dokumentací.

Příklad ukazuje, jak snadno lze věci realizovat s pomocí Compassu. Na konci této řady se také podíváme na alternativní Sassový framework. Susy nabízí štíhlý gridový systém.