Absolútne všetci skúsení inštalatéri používajú preprocesory. Žiadne výnimky. Ak sa chcete usilovať o túto aktivitu, nezabudnite na tieto programy. Na prvý pohľad môžu zavolať začiatočníkovi pokojnú hrôzu - už je to príliš podobné programovaniu! V skutočnosti sa môžete zaoberať všetkými možnosťami preprocesorov CSS asi za deň, a ak vyskúšate, potom na niekoľko hodín. V budúcnosti výrazne zjednodušia váš život.
Ako sa objavili preprocesory CSS.
Pre lepšie pochopenie vlastností tejto technológie budeme krátko preniknúť do histórie vývoja vizuálnej prezentácie webových stránok. Keď začalo masívne používanie internetu, neexistovali žiadne štýly. Spracovanie dokumentov závisí výhradne od prehľadávačov. Každý z nich mal svoje vlastné štýly, ktoré boli použité na zvládnutie určitých značiek. Preto stránky vyzerali inak v závislosti od prehliadača, v ktorom ste ich otvorili. Výsledkom je chaos, zmätok, problémy pre vývojárov.
V roku 1994 vyvinul nórsky vedec, Hookon, šablónu štýlov, ktorá by mohla byť použitá na vytvorenie vzhľadu stránky oddelene od dokumentu HTML. Myšlienku sponzorovali zástupcovia konzorcia W3C, ktoré sa ihneď zaviazali dokončiť to. O pár rokov neskôr vyšla prvá verzia špecifikácie CSS. Potom bola neustále zdokonaľovaná, zdokonaľovaná Ale koncept zostal rovnaký: každý štýl má určité vlastnosti.Používanie tabuliek CSS vždy spôsobilo určité problémy. Napríklad dizajnéri majú často ťažkosti pri triedení a zoskupovaní vlastníctva a pri dedičstve nie je všetko také jednoznačné. A teraz prišli dva tisíce. Značku čoraz viac začali pracovať profesionálni partneri, pre ktorých bola dôležitá flexibilná a dynamická práca so štýlmi. V tom čase CSS vyžadovalo umiestnenie predponu a sledovanie podpory nových možností prehliadača. Odborníci z javascriptu a Ruby sa zaoberali tým, že vytvorili preprocesory - doplnky pre CSS a pridávali nové funkcie.
CSS pre začiatočníkov: vlastnosti preprocesorov
Vykonávajú niekoľko funkcií:
zjednotiť predvoľby prehliadača a khaki;
zjednodušujú syntax;
umožňujú pracovať s vloženými selektormi bez chýb;
zlepšujú logiku štylizácie.
Stručne: Predregistor pridá logiku programovania do funkcie CSS. Teraz sa štylizácia vykonáva nie zvyčajným prevodom štýlov, ale niekoľkými jednoduchými technikami a prístupmi: premennými, funkciami, mixinami, cyklami, podmienkami. Okrem toho tu bola možnosť použiť matematiku.
Vzhľadom na popularitu týchto doplnkov W3C začal postupne pridávať svoje schopnosti do kódu CSS. Napríklad v špecifikácii sa objavila funkcia calc (), ktorú podporujú mnohé prehliadače. Očakáva sa, že čoskoro bude možné špecifikovať premenné a vytvoriť miksiny. To sa však stane v ďalekej budúcnosti a preprocesory sú už tu a už vynikajúcou prácou.
Populárne preprocesory CSS. Sass
Vyvinutý v roku 2007. Bola pôvodne zložkou Haml šablóny HTML. Nové funkcie pre správu prvkov CSS prišli k ovocným vývojárom na Ruby on Rails, ktoré sa začali šíriť všade. V Sass bol veľký počet funkcií, ktoré sú teraz zahrnuté v preprocesore: premenné, selektory pripevnenia, miksin (potom však nemohli pridať argumenty).
Vyhlásenie o premenných v systéme Sass
Premenné sa deklarujú pomocou symbolu $. Môžu ukladať vlastnosti a ich súbory, napríklad: "$ borderSolid: 1px solid red;". V tomto príklade sme ohlásili premennú nazvanú borderSolid a uložili v ňom 1px červenú červenú farbu. Teraz, ak v CSS potrebujeme vytvoriť červenú šírku hranice 1px, jednoducho túto premennú určuje za názov vlastníka. Po deklarovaní sa premenné nemôžu meniť. Niekoľko vstavaných funkcií je k dispozícii. Vyhlásime napríklad $ redColor s hodnotou # FF5050. Teraz v kóde CSS vo vlastnostiach elementu používame to na určenie farby písma: p {color: $ redColor;}. Chcete experimentovať s farbou? Použite funkcie stmavnutie alebo odľahčenie. 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, aby ste sa aspoň s nimi oboznámili a najlepšie ich študovať.
Príloha
Predtým na označenie hniezdenia sa museli používať dlhé a nepríjemné vzory. Predstavte si, že máme div, v ktorom leží p, a v ňom, otočenie, sa nachádza rozpätie. Pre div potrebujeme nastaviť farbu písma červenú, pre p - žltú pre rozpätie -ružová. V obvyklom CSS sa to robilo 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é" jeden k druhému.
Smernica o preprocesore
Importovať súbory pomocou smernice @import. Napríklad máme súbor fonts.sass, v ktorom sú deklarované štýly písma. Pripojte ho k hlavnému súboru style.sass: @import 'fonts'. Hotovo! Namiesto jedného veľkého štýlu šablón máme niekoľko, ktoré môžete použiť na rýchle a ľahké získanie potrebných vlastností.
Miksini
Jeden z najzaujímavejších nápadov. Umožňuje v jednom riadku určiť skupinu vlastností. Pracujú takto: @mixin bigFont {font-family: 'Times New Roman'; veľkosť písma: 64px; line-height: 80px; font-weight: tučné; } Ak chcete použiť miksin na položku na stránke, použite smernicu @include. Napríklad, chceme ho použiť na záhlavie h1. Získate nasledujúci návrh: h1 {@ include: largeFont;}
Všetky vlastnosti mxin budú priradené k h1.
Preprocessor Menej
Syntax Sass pripomína programovanie. Ak hľadáte možnosť, ktorá je najvhodnejšia pre začiatočníkov CSS, dávajte pozor na menej. Bola založená v roku 2009. Hlavným znakom - podpora natívnej syntaxe CSS, takže nie sú oboznámení s programovaním písacích nástrojov, bude ľahšie zvládnuť. Premenné sú deklarované pomocou symbolu @. Napríklad: @fontSize: 14px; Príloha funguje podľa rovnakých zásad ako v Sass. Miksins sú deklarované takto: .largeFont (){font-family: "Times New Roman"; veľkosť písma: 64px; line-height: 80px; font-weight: bold;}. Ak sa chcete pripojiť, nemusíte používať direktívy preprocesora - stačí pridať do vlastností zvolenej položky čerstvo vytvorený miksin. Napríklad: h1 {.largeFont;}.
Stylus
Iný preprocesor. Vytvoril v roku 2011 ten istý autor, ktorý prezentoval svet Jade, Express a ďalším užitočným produktom. Premenné možno deklarovať dvoma spôsobmi - explicitne alebo implicitne. Napríklad: font = 'Times New Roman'; - je to implicitná možnosť. Ale $ font = 'Times New Roman' je zrejmé. Miksins sú implicitne ohlásené a spojené. Syntax je: redColor () farba červená. Teraz môžeme pridať jeho element, napríklad: h1 redColor (); Na prvý pohľad sa Stylus môže zdať nejasný. Kde sú rodičovské zátvorky a bodkočiarky? Ale stojí to za to, aby sme sa do toho ponorili, všetko sa stáva oveľa jasnejšie. Majte však na pamäti, že predĺžený vývoj s týmto preprocesorom vás môže "znehodnotiť", aby ste použili klasickú syntax CSS. To niekedy spôsobuje problémy s potrebou pracovať s "čistými" štýlmi.
Aký preprocesor si vyberiete?
V skutočnosti to na tom nezáleží. Všetky možnosti poskytujú približne rovnaké možnosti, len syntax je pre každého iný. Odporúčame vám, aby ste postupovali nasledovne:
ak ste programátor a chcete pracovať so štýlmi, ako je kód, použite Sass;
ak ste webmaster a chcete pracovať so štýlmi, ako je obvyklé rozloženie, dávajte pozor na menej;
Ak máte radi minimalizmus, použite Stylus.
Pre všetky varianty existuje 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 venovať pozornosť Compassu - silnému nástroju s množstvom vstavaných funkcií. Napríklad po inštalácii sa už nikdy nebudete musieť starať o predpony dodávateľov. Zjednodušená práca s mriežkami. Existujú nástroje pre prácu s farbami, štetcom Niekoľko už oznámených mixinov je k dispozícii. Dajte to pár dní - ušetríte preto veľa času a úsilia v budúcnosti.
