Absolutně všichni zkušení instalatéři používají preprocesory. Žádné výjimky. Chcete-li tuto akci uspět, nezapomeňte na tyto programy. Na první pohled mohou zavolat začátečníkovi tichou hrůzu - už je to příliš podobné programování! Ve skutečnosti se můžete vypořádat se všemi možnostmi předprocesorů CSS asi za jeden den, a pokud se pokusíte, pak na pár hodin. V budoucnu značně zjednoduší váš život.
Jak se objevili předprocesory CSS
Pro lepší pochopení vlastností této technologie budeme krátce pronikat do historie vývoje vizuální prezentace webových stránek. Když začalo masivní používání internetu, neexistovaly žádné styly. Zpracování dokumentů záviselo výhradně na prohlížečích. Každá z nich měla své vlastní styly, které byly použity pro zpracování určitých značek. Stránky tedy vypadaly jinak v závislosti na prohlížeči, ve kterém jste je otevřeli. Výsledkem je chaos, zmatek, problémy vývojářů.
Norský vědec Hookon vytvořil v roce 1994 stylový list, který by se mohl použít k tomu, aby vzhled stránky vypadal odděleně od dokumentu HTML. Tato myšlenka byla spolufinancována zástupci konsorcia W3C, které se okamžitě zavázaly k dokončení. O několik let později byla vydána první verze specifikace CSS. Pak byla neustále zdokonalována, zdokonalována. Ale koncept zůstal stejný: každý styl má určité vlastnosti.Použití tabulek CSS vždy způsobilo určité problémy. Například návrháři často mají potíže s tříděním a seskupováním vlastností a s dědictvím není všechno tak jednoznačné. A teď přišli dva tisíce. Značka začala být stále obsazena profesionálními vývojáři, pro něž byla důležitá flexibilní a dynamická práce se styly. V té době CSS vyžadovalo umístění předpon a sledování podpory nových funkcí prohlížeče. Následně se specialisté javascriptu a Ruby zabývali záležitostí vytvořením preprocesorů - doplňků pro CSS a přidáním nových vlastností.
CSS pro začátečníky: vlastnosti preprocesorů
Provádějí několik funkcí:
sjednocují předpony prohlížeče a khaki;
zjednodušení syntaxe;
poskytují možnost pracovat s vloženými selektory bez chyb;
zlepšují logiku stylingu.
Stručně: Preprocesor přidává programovací logiku do funkce CSS. Stylizace se nyní neuskutečňuje obvyklým přenosem stylů, nýbrž několika jednoduchými technikami a přístupy: proměnnými, funkcemi, mixiny, cykly, podmínkami. Navíc byla možnost používat matematiku.
Když viděli popularitu těchto doplňků, W3C začala postupně přidávat své schopnosti do kódu CSS. Například ve specifikaci se objevila funkce calc (), která je podporována mnoha prohlížeči. Očekává se, že bude brzy možné specifikovat proměnné a vytvořit miksiny. To se ale stane ve vzdálené budoucnosti, a předprocesory jsou již tady a již vynikající práce.
Populární preprocesory CSS. Sass
Vyvinuto v roce 2007. Původně byla součástí šablony HTML. Nové funkce pro správu prvků CSS přicházejí na vývojáře ovoce na Ruby on Rails, které se začaly šířit všude. V Sassu bylo obrovské množství funkcí, které jsou nyní zahrnuty v jakémkoli preprocesoru: proměnné, voliče připevnění, miksin (pak však nemohly přidat argumenty).
Prohlášení o proměnných v Sass
Proměnné jsou deklarovány pomocí symbolu $. Mohou ukládat vlastnosti a jejich soubory, například: "$ borderSolid: 1px solid red"; V tomto příkladu jsme ohlásili proměnnou nazvanou borderSolid a v ní uloženou 1px červenou barvu. Nyní, pokud v CSS potřebujeme vytvořit červenou hranici šířky 1px, jednoduše určí tuto proměnnou za název vlastnosti. Po deklaraci nelze proměnné měnit. K dispozici je několik vestavěných funkcí. Například deklarujeme $ redColor s hodnotou # FF5050. Nyní v kódu 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 s nimi alespoň seznámili a nejlépe je studovat.
Příloha
Dříve, aby bylo naznačeno, že hnízdění mělo použít dlouhé a nepříjemné návrhy. Představte si, že máme div, ve kterém leží p, a v něm, otočení, se nachází rozpětí. Pro div potřebujeme nastavit barvu písma červenou, pro p - žlutou, pro span -lavice V obvyklém CSS se to dělo takto: div {barva: červená; } div p {barva: žlutá; } div p span {barva: růžová; } CSS preprocesorem je vše jednodušší a kompaktnější: div {color: red; p {barva: žlutá; .span {barva: růžová; }}} Prvky jsou doslova "vloženy" jeden k druhému.
Směrnice předprocesoru
Importovat soubory můžete pomocí direktivy @import. Například máme soubor fonts.sass, ve kterém jsou deklarovány styly písma. Připojte jej k hlavnímu souboru style.sass: @import 'fonts'. Hotovo! Namísto jedné velké šablony stylů máme několik, které můžete použít k rychlému a snadnému přístupu k potřebným vlastnostem.
Miksini
Jedna z nejzajímavějších nápadů. Umožňuje jednomu řádku určit sadu vlastností. Pracují takto: @mixin bigFont {font-family: 'Times New Roman'; velikost písma: 64px; výška řádku: 80px; font-weight: tučné; } Chcete-li miksin použít na položku na stránce, použijte direktivu @include. Například jej chceme použít v záhlaví h1. Získá se následující návrh: h1 {@ include: largeFont;}
Všechny vlastnosti mxin budou přiřazeny h1.
Méně preprocesor
Syntaxe Sass připomíná programování. Pokud hledáte možnost, která je nejvhodnější pro začátečníky CSS, věnujte pozornost méně. Byl vytvořen v roce 2009. Hlavním rysem - podpora přirozené syntaxe CSS, takže nejsou obeznámeni s programováním písařů, bude snazší zvládnout. Proměnné jsou deklarovány pomocí symbolu @. Například: @fontSize: 14px; Příloha pracuje na stejných principech jako v Sass. Miksins jsou deklarováni takto: .largeFont (){font-family: 'Times New Roman'; velikost písma: 64px; výška řádku: 80px; font-weight: tučné;}. Chcete-li se připojit, nemusíte používat příkazy preprocesoru - stačí jen přidat čerstvě vytvořený miksin do vlastností vybrané položky. Například: h1 {.largeFont;}.
Stylus
Další předběžný procesor. Vytvořeno v roce 2011 stejným autorem, který představil svět Jade, Express a další užitečné produkty. Proměnné lze deklarovat dvěma způsoby - explicitně nebo implicitně. Například: font = 'Times New Roman'; - toto je implicitní volba. Ale $ font = 'Times New Roman' je zřejmé. Miksins jsou ohlášeni a spojeni implicitně. Syntaxe je: redColor () barva červená. Nyní můžeme přidat svůj prvek, například: h1 redColor (); Na první pohled se Stylus může zdát nejasný. Kde jsou rodičovské závorky a středníky? Ale stojí to za to, že se do toho ponoříte, všechno se stává mnohem jasnější. Mějte však na paměti, že prodloužený vývoj s tímto předprocesorem může "zbavit" vaší klasické CSS syntaxe. To někdy způsobuje problémy s potřebou pracovat s "čistými" styly.
Jaký preprocesor si vybrat?
Ve skutečnosti to na tom nezáleží. Všechny možnosti poskytují přibližně stejné funkce, ale syntaxe je pro všechny odlišná. Doporučujeme provést následující kroky:
pokud jste programátor a chcete pracovat se styly, jako je kód, použijte Sass;
pokud jste webmaster a chcete pracovat se styly, jako je obvyklé rozložení, věnujte pozornost méně;
Pokud máte rádi minimalismus, použijte Stylus.
Pro všechny varianty existuje obrovské množství zajímavých knihoven, které mohou dále zjednodušit vývoj.Uživatelům Sass je doporučeno dávat pozor na Compass - výkonný nástroj se spoustou vestavěných funkcí. Například po instalaci se nikdy nebudete muset starat o předpony dodavatelů. Zjednodušená práce s mřížkami. K dispozici jsou pomůcky pro práci s barvami, přízraky. Je k dispozici řada již oznámených mixinů. Dej jí to pár dní - takže ušetříte spoustu času a úsilí v budoucnu.
