CSS preprocesor: přehled, výběr, aplikace

Absolutně všichni zkušení návrháři rozvržení používají preprocesory. Neexistují žádné výjimky. Chcete-li tuto akci uspět, nezapomeňte na tyto programy. Na první pohled mohou způsobit začátečníkům tichou hrůzu - je to příliš podobné programování! Ve skutečnosti můžete pochopit všechny schopnosti předprocesorů CSS asi za jeden den, a pokud se pokusíte, pak za pár hodin. V budoucnu výrazně zjednoduší váš život.

Jak se objevily předprocesory CSS

Chcete-li lépe porozumět vlastnostem této technologie, krátce se ponořte do historie vývoje vizuální reprezentace webových stránek.

Když hromadná internetová aplikace právě začínala, nebyly tam žádné styly. Návrh dokumentů závisel pouze na prohlížečích. Každý z nich měl své vlastní styly, které byly použity k zpracování určitých značek. Stránky vypadaly jinak podle toho, v jakém prohlížeči jste je otevřeli. Výsledkem je chaos, zmatek, problémy vývojářů.

V roce 1994 vytvořil norský vědec Haakon Lee stylový list, který by mohl být použit k vytvoření vzhledu stránky odděleně od dokumentu HTML. Tato myšlenka byla pozvána na zástupce konsorcia W3C, kteří na něm okamžitě začali pracovat. O několik let později byla zveřejněna první verze specifikace CSS. Pak byla neustále zlepšována, byla dokončena - ale koncept zůstal stejný: každý styl má určité vlastnosti.

Použití tabulek CSS vždy způsobilo určité problémy. Kodér například často měl potíže s třídováním a seskupováním vlastností a dědičnost není tak jednoduchá.

A pak přišli dva tisíce. Profesionální vývojáři začali značkovací práce častěji, pro něž byla důležitá flexibilní a dynamická práce se styly. CSS, který v té době existoval, vyžadoval podporu prefixování a sledování nových funkcí prohlížeče. Experti jazyka jаvascript a Ruby se dostali do podnikání, vytvářeli preprocesory - doplňky pro CSS a přidávaly nové funkce.

CSS pro začátečníky: funkce preprocesorů

Provádějí několik funkcí:

• Sjednoťte prefixy a hackery prohlížeče;
• zjednodušení syntaxe;
• Umožňuje pracovat se vnořenými voliči bez chyb;
• zlepšit logiku stylingu.

Stručně: preprocesor přidává programovací logiku do funkcí CSS. Nyní, styling není prováděna v obvyklém seznamu stylů a pomocí několika jednoduchých technik a postupů: proměnné, funkce, sliznatek, cykly podmínky. Kromě toho bylo možné použít matematiku.

Když viděli popularitu těchto doplňků, W3C začala postupně přidávat funkce z nich do kódu CSS. Například funkce calc () se objevila ve specifikaci, kterou podporuje mnoho prohlížečů. Očekává se, že brzy bude možné nastavit proměnné a vytvořit myxiny. To se však stane ve vzdálené budoucnosti a preprocesory jsou již tady a fungují dokonale.

Populární CPS preprocesory. Sass

Byl vyvinut v roce 2007. Zpočátku to byla součást Hamla, motoru HTML šablon. Nové funkce pro CSS prvky ovládat vychutnal vývojářům na Ruby on Rails, který začal ji šířit po celém světě. Sass obrovské množství funkcí, které jsou nyní obsaženy v každém preprocesorem:, (potom, však nemůže být tyto argumenty) proměnné, vkládání selektorů sliznatek.

Deklarování proměnných v Sass

Proměnné jsou deklarovány pomocí znaku $. V nich můžete uložit vlastnosti a jejich soubory, například: "$ borderSolid: 1px solid red;". V tomto příkladu jsme deklarovali proměnnou nazvanou borderSolid a uložili v ní hodnotu 1px. Nyní, pokud v CSS potřebujeme vytvořit červený okraj se šířkou 1px, jednoduše určí tuto proměnnou za názvem vlastnosti. Po prohlášení nelze měnit proměnné. K dispozici je několik vestavěných funkcí. Například deklarovat proměnnou $ redColor s hodnotou # FF5050. Nyní v CSS ve vlastnostech prvku používáme k určení barvy písma: p {color: $ redColor-}. Chcete experimentovat s barvou? Funkce ztmavte nebo zesvětlete. To se děje takto: p {color: darken ($ redColor, 20%) -}. V důsledku toho bude barva redColor o 20% lehčí.

Sass má mnoho vestavěných funkcí. Doporučujeme, abyste se alespoň s nimi seznámili a lépe se učit.

Hnízdění

Dříve, abychom označili hnízdění, museli jsme použít dlouhé a nepohodlné konstrukce. Představte si, že máme div, ve kterém p leží, a v něm je naopak rozpětí. Pro div potřebujeme nastavit barvu písma na červenou, pro p-žlutou, pro span-růžovou. V obyčejném CSS by to mělo být takto:

div {

barva: červená;

}}

div p {

barva: žlutá;

}}

div p span {

barva: růžová;

}}

S preprocesorem CSS je vše jednodušší a kompaktnější:

div {

barva: červená;

p {

barva: žlutá;

.span {

barva: růžová;

}}

}}

}}

Prvky jsou doslova "vloženy" do sebe.

Příkazy předprocesoru

Pomocí direktivy @import můžete importovat soubory. Máme například soubor fonts.sass, ve kterém jsou deklarovány styly pro fonty. Připojíme jej k hlavnímu souboru style.sass: @import lsquo-fontsrsquo-. Hotovo! Místo jednoho velkého souboru se styly, máme několik, které můžete použít k rychlému a snadnému přístupu k požadovaným vlastnostem.

Mixiny

Jeden z nejzajímavějších zadumok. Umožňuje určit jednu sadu vlastností v jednom řádku. Pracujte takto:

@mixin largeFont {

font-family: lsquo-Times New Romanrsquo-;

velikost písma: 64px;

výška řádku: 80px;

font-weight: tučné;

}}

Chcete-li použít prvek mixin na prvek na stránce, použijte direktivu @include. Například jej chceme použít v záhlaví h1. Získá se následující konstrukce: h1 {@ include: largeFont-}

Všechny vlastnosti z mixin budou přiřazeny prvku h1.

Méně preprocesor

Syntaxe Sass připomíná programování. Pokud hledáte možnost, která je vhodnější pro začátečníky studentů CSS, věnujte pozornost méně. Byla založena v roce 2009. Hlavním rysem je podpora přirozené syntaxe CSS, takže je jednodušší ji naučit pro ty, kteří nejsou obeznámeni s programováním.

Proměnné jsou deklarovány symbolem @. Například: @fontSize: 14px; Nesting pracuje na stejných principech jako v Sass. Mixiny jsou deklarovány takto: .largeFont () {font-family: lsquo-Times New Romanrsquo-- velikost písma: 64px; výška řádku: 80px; font-weight: tučné-}. Pro připojení nemusíte používat příkazy preprocesoru - stačí jen přidat čerstvě vytvořený mixin ke vlastnostem vybraného prvku. Například: h1 {.largeFont-}.

Stylus

Další předprocesor. Vytvořeno v roce 2011 stejným autorem, který dává světlu Jade, Express a další užitečné produkty.

Proměnné lze deklarovat dvěma způsoby - explicitně nebo implicitně. Například: font = lsquo-Times New Romanrsquo-- je implicitní volba. Ale $ font = lsquo-Times New Romanrsquo-explicitní. Mixiny jsou implicitně deklarovány a připojeny. Syntaxe je: redColor () barva červená. Nyní jej můžeme přidat k prvku, například: h1 redColor () -.

Na první pohled se Stylus může zdát nepochopitelný. Kde jsou "původní" závorky a středníky? Ale je potřeba se jen ponořit do toho, protože vše se stane mnohem jasnějším. Nezapomínejte však, že dlouhý vývoj s tímto předprocesorem může "znehodnotit" použití klasické syntaxe CSS. Někdy to způsobuje problémy, když potřebujete pracovat s "čistými" styly.

Který předběžný procesor bych si měl vybrat?

Ve skutečnosti je na tom nezáleží. Všechny možnosti poskytují stejné příležitosti, pouze syntaxe jednotlivých je odlišná. Doporučujeme vám postupovat takto:

• pokud jste programátor a chcete pracovat se styly jako kód, použijte Sass;
• pokud jste designer a chcete pracovat se styly jako u obvyklého rozložení, věnujte pozornost méně;
• pokud máte rádi minimalismus, použijte Stylus.

Pro všechny možnosti je k dispozici velký počet zajímavých knihoven, které mohou dále zjednodušit vývoj. Uživatelům společnosti Sass je doporučeno věnovat pozornost Compassu - výkonnému nástroji s mnoha vestavěnými funkcemi. Například po instalaci se nikdy nebudete muset starat o předčíslí dodavatele. Jednodušší práce s mřížkami. K dispozici jsou nástroje pro práci s barvami, sprites. Existuje řada již deklarovaných myxinů. Dejte tomuto nástroji pár dní - čímž ušetříte spoustu času a energie v budoucnu.