CSS preprocesory

Takto vypadá hlavička velké části webů. Obsahuje CSS styly pro různé části webu, pro různá rozlišení nebo css styly různých frameworků a poté jsou každý zvlášť importovány na produkční verzi webu. To je špatně! Protože každý takto importovaný CSS styl vytváří nový http request, na desktopu to neni tolik znatelné, ale pokud chcete vytvořit responsivní web, který se bude dobře zobrazovat i na mobilech měli by jste si na to dávat pozor.

Pokud musí člověk skrz omezený mobilní internet načítat všechny tyto styly, načtění celé stránky se může celkem protáhnout.

Jak toho dosáhnout? Pomocí CSS preprocesorů velmi jednoduše. Využijeme stejně vypadající, ale jinak fungující funkce @import. V klasickém CSS pokud použijeme @import, docílíme jednoho CSS souboru, ale načítání probíhá úplně stejně. Každý soubor se načítá zvlášt a vytváří http request.

Veškeré práce s css preprocesory probíhají většinou výhradně lokálně. Pokud se kompilují větší soubory nebo více souboru, může kompilace trvat až minutu.

Preprocesory nabíjezí možnost rozdělit výsledný CSS soubor do několika menších a tyto menší pak může pomocí funkce @import vkládat do hlavního preprocesorového souboru, který pak následně kompilujete. Výsledkem je jediné CSS se všemi styly, pokud využíváte některé css frameworky či knihovny, můžete stejným způsobem importovat i jejich zdrojové css soubory.

Takto pak může vypadat vaše výsledné CSS, po kompilaci a zminifikované.