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

Absolutně všechny zkušené webové designéry použít preprocesor. Neexistují žádné výjimky. Chcete-li uspět v této činnosti, nezapomeňte o těchto programech. Na první pohled mohou způsobit nováček klidnou hrůza - to je příliš podobá programování! Ve skutečnosti, můžete vypořádat se všemi funkcemi CSS preprocesorem přibližně jeden den, a pokud se pokusíte, pak pár hodin. V budoucnu budou výrazně zjednodušit život.

Jak se CSS preprocesor

Aby bylo možné lépe pochopit vlastnosti této technologie, krátce ponořit do historie vizuální prezentaci webových stránek.

Kdy teprve začínají masivní využívání internetu, neexistovaly žádné listy stylu. Provádění dokumentů závisela výhradně na prohlížeči. Každý z nich měl své vlastní styly, které byly použity k léčbě určitých značek. V souladu s tím strany vypadat odlišně v závislosti na pořadí, ve kterém prohlížeč je otevřít. Výsledek - chaosu zmatek, problémy pro vývojáře.

V roce 1994 norský vědec Hakon Lie vyvinul stylů, které by mohly být použity pro vzhled stránek odděleně od HTML dokumentu. Členové myšlenka priglanulas W3C, který okamžitě vyrazil dokončení. O několik let později vydal první verzi specifikace CSS. Pak se neustále zlepšuje, je dokončen ... Ale koncept zůstal všichni stejný: každý styl nastavit určité vlastnosti.

Pomocí CSS Tabulky byla vždy problematická. Například webové designéry často měl problémy s třídění a seskupování funkce a dědičnost není tak jednoduché.

A pak přišla dvě tisíciny. Značení se stále více začala zabývat v profesních front-end vývojáře, což je důležité být flexibilní a dynamické pracovní styly. Existovaly umístěním časových požadoval CSS prefixů a sledování podpory nových možností prohlížeče. Potom pomocí JavaScriptu a odborníci Ruby dostal k jádru věci, vytváří preprocesoru - nadstavbu pro CSS, nové funkce jsou přidány k tomu.

CSS pro začátečníky: preprocesoru funkce

Oni mají několik funkcí:

• sjednotit předpony prohlížeče a khaki;

• zjednodušit syntaxe;

• dát možnost pracovat s vnořené selektory bez chyb;

• zlepšit logický styl.

Stručně řečeno: preprocesoru přidává CSS programování logické schopnosti. 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, schopnost používat matematiku.

Vidět popularitu těchto doplňků, W3C začaly postupně přidávat možnost z nich v CSS kódu. Například, v tomto popisu, takže tam funkce vypočteno (), který je podporován mnoha prohlížeče. Očekává se, že jakmile to bude možné nastavit proměnné a vytvořit sliznatek. To však bude dít v daleké budoucnosti, a preprocesory už tady a už dobře fungovat.

Popular preprocesory CSS. Sass

Navržený v roce 2007. Původně součást Haml - šablona HTML. 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.

Deklarace proměnné v Sass

Proměnné prohlášen za znakem $. Dokáží udržet své vlastnosti a soubory, například: "$ borderSolid: 1px solid red;". V tomto příkladu jsme deklarovali proměnnou s názvem borderSolid a zachránil ho cení 1px svítit červeně. Teď, když jsme se v CSS je třeba vytvořit červený šířku hraniční 1px, prostě ukazuje, že proměnné po název vlastnosti. Po vyhlášení proměnných nelze změnit. Existuje několik vestavěných funkcí. Například deklarovat proměnnou v hodnotě $ redcolor # FF5050. Nyní, v kódu CSS ve vlastnostech jakéhokoliv prvku, jej použít k nastavení barvy písma: p {color: $ redColor; }. Chcete experimentovat s barvou? Použijte funkci tmavší nebo světlejší. To se provádí tak,: p {color: ztmavit ($ redColor, 20%); }. V důsledku toho bude barva redColor 20% lehčí.

Mnoho vestavěných funkcí Sass. V hodnotě nejméně četl, ale lepší - se učit.

hnízdění

Dříve uvést hnízdění musel použít dlouhé a nepříjemné design. Představme si, že máme div, který je p a v něm zase nastavit rozsah. Pro div, musíme nastavit barvu písma červená, pro p - žlutá, pro rozpětí - růžová. V typickém CSS by to být provedeno následujícím způsobem:

div {

barva: červená;

}

div p {

barva: žlutá;

}

div p span {

barva: růžová;

}

S CSS preprocesorem vše se stává jednodušší a kompaktnější:

div {

barva: červená;

p {

barva: žlutá;

.span {

barva: růžová;

}

}

}

Prvky doslova „investovaly“ jeden druhého.

direktivy preprocesoru

Pomocí direktivy @import lze importovat soubory. Například, máme soubor fonts.sass která deklaruje styly pro písma. Připojte jej do hlavního souboru style.sass: @import ‚písma‘. Hotovo! Namísto jednoho velkého souboru s styly máme několik, které mohou být použity pro rychlý a snadný přístup k požadovaným vlastnostem.

sliznatek

Jedním z nejzajímavějších nápadů. To umožňuje jeden řádek žádat sadu vlastností. Postupovat takto:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-váha: tučný;

}

Sliznatek aplikovat na prvek na stránce, použijte směrnici @include. Například chceme aplikovat na hlavičky h1. Máme následující strukturu: H1 {@include: largeFont; }

Všechny tyto vlastnosti sliznatek jsou přiřazena h1 prvek.

preprocessor Méně

Syntax Sass připomíná programování. Pokud hledáte pro možnost, která je vhodnější pro začátečníky, kteří studují CSS, podívejte se za méně peněz. To bylo vytvořeno v roce 2009. Hlavním rysem - podpora CSS nativní syntaxi, tak obeznámeni s programovacím Imposer to bude jednodušší se učit.

Proměnné jsou deklarovány pomocí symbol @. Například: @fontSize: 14 pixelů;. Hnízdění pracuje na stejných principech jako v Sass. Sliznatek jsou vyhlášeny takto: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-váha: tučný; }. Pro připojení není nutné používat direktivy preprocesoru - stačí přidat nově vytvořené sliznatek ve vlastnostech vybraného prvku. Například: h1 {.largeFont; }.

jehla

Další preprocessor. Vytvořený v roce 2011 od stejného autora, který dal světu Jade, Express a další užitečné produkty.

Proměnné mohou být deklarovány dvěma způsoby - buď explicitně nebo implicitně. Například: písmo = 'Times New Roman'; - implicitní volba. Ale $ font = 'Times New Roman' - jasné. Sliznatek jsou deklarovány a implicitně připojen. Syntaxe je následující: redColor () červenou barvu. Nyní můžeme přidat položku, například: h1 redColor ().

Stylus Na první pohled se může zdát nepochopitelné. Kde je ten „nativní“ závorky a středníky? Ale je třeba ponořit se do něj všechno bude mnohem jasnější. Mějte však na paměti, že dlouhodobý vývoj této preprocesorem může „odstavit“ použít klasický syntaxi CSS. To někdy způsobuje problémy, když mají k práci s „čistým“ stylu.

Co preprocessor vybrat?

Ve skutečnosti, to je ... na tom nezáleží. Všechny verze nabízejí o stejných funkcích jen syntaxe každý je jiný. Doporučujeme postupovat následujícím způsobem:

• pokud jste - programátor a chcete pracovat se styly a to jak v kódu, použijte Sass;
• pokud jste - kodér a chcete pracovat se styly jako u konvenčního rozložení, dávat pozor na méně;
• pokud máte rádi minimalismus, pomocí stylusu.

U všech variant nekonečné množství zajímavých knihoven, které lze ještě dále zjednodušit vývoj. Uživatelé Sass doporučuje věnovat pozornost Compass - mocný nástroj s mnoha vestavěných funkcí. Například po instalaci jej nikdy nebudete muset starat o prodejce verze prefixem. Zjednodušuje práci s mřížkami. K dispozici jsou nástroje pro práci s květinami, skřítků. Rozsah již oznámila sliznatek. Dát tento nástroj pár dní - a tak vám ušetří spoustu času a úsilí v budoucnu.