Preprocesor CSS: prehľad, výber, aplikácia

Všetci skúsení návrhári dizajnu absolútne používajú preprocesory. Neexistujú žiadne výnimky. Ak sa chcete usilovať o túto aktivitu, nezabudnite na tieto programy. Na prvý pohľad môžu spôsobiť začiatočníkovi pokojnú hrôzu - to je príliš veľa ako programovanie! V skutočnosti môžete porozumieť všetkým možnostiam preprocesorov CSS asi za deň, a ak sa pokúsite, potom na niekoľko hodín. V budúcnosti výrazne zjednoduší váš život.

Ako sa objavili preprocesory CSS

Na lepšie pochopenie vlastností tejto technológie sa krátko ponoríme do histórie vývoja vizuálnej reprezentácie webových stránok.

Keď sa hromadná internetová aplikácia práve začínala, neexistovali žiadne štýly. Návrh dokumentov závisí výhradne od prehľadávačov. Každý z nich mal svoje vlastné štýly, ktoré boli použité na spracovanie určitých značiek. Preto stránky vyzerali rozdielne v závislosti od toho, v ktorom prehliadači ste ich otvorili. Výsledkom je chaos, zmätok, problémy pre vývojárov.

V roku 1994 vyvinul nórsky vedec Haakon Lee štýl štýlu, ktorý by sa mohol použiť na vytvorenie vzhľadu stránky oddelene od dokumentu HTML. Táto myšlienka bola pozvaná na predstaviteľov konzorcia W3C, ktoré na ňom okamžite začali pracovať. O pár rokov neskôr bola zverejnená prvá verzia špecifikácie CSS. Potom sa neustále zdokonaľovali, zlepšovali ... Ale koncept zostal rovnaký: každý štýl má určité vlastnosti.

Použitie tabuliek CSS vždy spôsobilo určité problémy. Napríklad, kodér má často ťažkosti pri triedení a zoskupovaní vlastností a dedenie nie je tak jednoduché.

A potom prišli dva tisíce. Profesionálni vývojári na začiatku vývoja začali častejšie vytvárať značky, pre ktoré bola dôležitá flexibilná a dynamická práca so štýlmi. CSS, ktoré v tom čase existovalo, vyžadovalo prefixovanie a sledovanie podpory nových funkcií prehliadača. Potom sa experti JavaScript a Ruby dostali do podnikania a vytvorili preprocesory - doplnky pre službu CSS a pridávali nové funkcie.

CSS pre začiatočníkov: funkcie preprocesorov

Vykonávajú niekoľko funkcií:

• Zjednotiť predpony prehliadača a hack;

• Zjednodušte syntax;

• Povoliť prácu s vnorenými selektormi bez chýb;

• Zlepšite logiku štýlu.

Stručne povedané: preprocesor pridá logiku programovania k funkciám CSS. Teraz je styling vykonávaný nie obvyklým výčtom štýlov, ale pomocou niekoľkých jednoduchých trikov a prístupov: premenné, funkcie, myxíny, cykly, podmienky. Okrem toho bolo možné použiť matematiku.

Vďaka popularite takýchto doplnkov W3C začal postupne pridávať funkcie do kódu CSS. Napríklad funkcia calc () sa objavila v špecifikácii, ktorú podporujú mnohé prehliadače. Očakáva sa, že čoskoro bude možné nastaviť premenné a vytvoriť myxíny. To sa však stane v ďalekej budúcnosti a preprocesory už sú tu a dokonale fungujú.

Populárne preprocesory CSS. Sass

Bol vyvinutý v roku 2007. Bol pôvodne komponent Haml, HTML šablónového motora. Nové funkcie pre správu prvkov CSS prišli na chuť vývojárov na Ruby on Rails, ktorá sa začala šíriť všade. V systéme Sass sa objavil obrovský počet príležitostí, ktoré sú teraz zahrnuté v preprocesore: premenné, vkladanie selektorov, mixins (potom im však nedali žiadne argumenty).

Vyhlásenie premenných v Sass

Premenné sú deklarované pomocou znaku $. V nich môžete uložiť vlastnosti a ich súbory, napríklad: "$ borderSolid: 1px solid red"; V tomto príklade sme deklarovali premennú nazvanú borderSolid a uložili v ňom hodnotu 1px červenú červenú. Teraz, ak v CSS potrebujeme vytvoriť červenú hranicu so šírkou 1px, jednoducho určuje túto premennú za názvom nehnuteľnosti. Po vyhlásení sa nemôžu meniť premenné. Niekoľko zabudovaných funkcií je k dispozícii. Označte napríklad premennú $ redColor s hodnotou # FF5050. Teraz v CSS vo vlastnostiach elementu používame to na nastavenie farby písma: p {color: $ redColor; }. Chcete experimentovať s farbou? Používajte funkcie tmavnutia alebo odľahčenia. Toto sa deje takto: p {color: darken ($ redColor, 20%); }. V dôsledku toho bude farba redColor o 20% ľahšia.

Sass má veľa vstavaných funkcií. Odporúčame vám, aby ste sa aspoň s nimi oboznámili a lepšie sa naučili.

hniezdenia

Predtým, aby sme označili hniezdenie, museli sme použiť dlhé a nepohodlné vzory. Predstavte si, že máme div, v ktorom p leží, a v ňom, zase, je rozpätie. Pre div, musíme nastaviť farbu písma na červenú, pre p-žltú, pre span-ružovú. V bežnom CSS by sa to malo robiť takto:

Div {

Farba: červená;

}

Div p {

Farba: žltá;

}

Div p span {

Farba: ružová;

}

S preprocesorom CSS je všetko jednoduchšie a kompaktnejšie:

Div {

Farba: červená;

P {

Farba: žltá;

.span {

Farba: ružová;

}

}

}

Prvky sú doslovne "vložené" do druhého.

Smernice preprocesorov

Pomocou smernice @import môžete importovať súbory. Napríklad máme súbor s názvom fonts.sass, v ktorom sú deklarované štýly pre písma. Pripojíme ho k hlavnému súboru style.sass: @import 'fonts'. Hotovo! Namiesto jedného veľkého súboru so štýlmi, máme niekoľko, ktoré môžete použiť na rýchle a ľahké získanie požadovaných vlastností.

sliznatiek

Jeden z najzaujímavejších zadávok. Umožňuje špecifikovať jednu sadu vlastností v jednom riadku. Pracujte takto:

@ Mixin largeFont {

Rodina písiem: 'Times New Roman';

Veľkosť písma: 64px;

Výška riadku: 80px;

Hmotnosť písma: tučné;

}

Ak chcete použiť prvok mixin na prvok na stránke, použite smernicu @include. Napríklad, chceme ho použiť v hlavičke h1. Získate nasledujúcu konštrukciu: h1 {@ include: largeFont; }

Všetky vlastnosti zo zmesi budú priradené prvku h1.

Menej preprocesor

Syntax Sass pripomína programovanie. Ak hľadáte možnosť, ktorá je vhodnejšia pre študentov, ktorí sa učia CSS pre začiatočníkov, dávajte pozor na menej. Bola založená v roku 2009. Hlavnou funkciou je podpora natívnej syntaxe CSS, takže je ľahšie ju naučiť s cudzími ľuďmi, ktorí nie sú oboznámení s programovaním programátora.

Premenné sú deklarované symbolom @. Napríklad: @fontSize: 14px; Hniezdenie pracuje na rovnakých princípoch ako v Sass. Mixiny sú deklarované takto: .largeFont () {font-family: 'Times New Roman'; Veľkosť písma: 64px; Výška riadku: 80px; Hmotnosť písma: tučné; }. Pri pripojení nepotrebujete použiť preprocesorové direktívy - stačí pridať novo vytvorenú mixin ku vlastnostiam vybraného prvku. Napríklad: h1 {.largeFont; }.

ihla

Ďalší preprocesor. Vytvoril v roku 2011 ten istý autor, ktorý dal svetu Jade, Express a ďalšie užitočné produkty.

Premenné môžu byť deklarované dvoma spôsobmi - explicitne alebo implicitne. Napríklad: font = 'Times New Roman'; Je implicitnou možnosťou. Ale $ font = 'Times New Roman' - explicitné. Mixiny sú deklarované a implicitne spojené. Syntax je: redColor () farba červená. Teraz ho môžeme pridať k prvku, napríklad: h1 redColor ();.

Na prvý pohľad sa Stylus môže zdať nepochopiteľný. Kde sú "pôvodné" zátvorky a bodkočiarky? Ale ak sa len ponoríte do toho, všetko sa stáva oveľa jasnejšie. Pamätajte však, že dlhý vývoj s týmto preprocesorom vás môže "odradiť" od používania klasickej syntaxe CSS. To niekedy spôsobuje problémy, keď potrebujete pracovať s "čistými" štýlmi.

Ktorý preprocesor by som si mal vybrať?

V skutočnosti ... to nezáleží. Všetky možnosti poskytujú približne rovnaké možnosti, len syntax každého z nich je iný. Odporúčame postupovať nasledovne:

• Ak ste programátor a chcete pracovať so štýlmi ako kód, použite Sass;
• Ak ste dizajnér rozloženia a chcete pracovať so štýlmi ako s obvyklým rozložením, dávajte pozor na menej;
• Ak máte radi minimalizmus, použite Stylus.

Pre všetky možnosti je k dispozícii obrovské množstvo zaujímavých knižníc, ktoré môžu ďalej zjednodušiť vývoj. Používateľom spoločnosti Sass sa odporúča, aby venovali pozornosť Compass - silnému nástroju s mnohými vstavanými funkciami. Napríklad po jeho inštalácii sa nikdy nebudete musieť obávať predpôn predávajúceho. Jednoduchšia práca s mriežkami. K dispozícii sú nástroje pre prácu s farbami, sprites. Niekoľko už deklarovaných myxínov je k dispozícii. Dajte tomuto nástroju pár dní - a tým vám ušetrí veľa času a energie v budúcnosti.