Výber CSS preprocesora. Príklad práce s viacerými prehliadačmi

Moderné CSS je sila a v kombinácii s preprocesormi je to vo všeobecnosti bojový stroj na zdobenie obsahu na stránkach. Článok poskytuje podrobného sprievodcu Sass / SCSS s príkladmi. Po prečítaní sa naučíte používať mixíny, premenné a direktívy na ešte väčšiu kontrolu nad štýlmi.

Poznámka Všetok kód Sass/SCSS je skompilovaný do CSS, aby mu prehliadače porozumeli a správne ho zobrazili. Prehliadače v súčasnosti nepodporujú priamo prácu so Sass/SCSS alebo akýmkoľvek iným CSS preprocesorom a štandardná špecifikácia CSS podobnú funkcionalitu neposkytuje.

Prečo používať Sass/SCSS namiesto CSS?

Hniezdenie- SCSS vám umožňuje vkladať pravidlá CSS do seba. Vnorené pravidlá platia iba pre prvky, ktoré sa zhodujú s externými selektormi (a ak hovoríme o Sass, potom je všetko krásne a intuitívne aj bez zátvoriek).
Premenné- štandardné CSS má tiež koncept premenných, ale v Sass sa s nimi dá pracovať trochu inak. Opakujte ich napríklad cez direktívu @for. Alebo dynamicky generujte vlastnosti. Viac podrobností nájdete na ruskojazyčnej webovej stránke projektu.
Vylepšené matematické operácie- môžete sčítať, odčítať, násobiť a deliť hodnoty CSS. Na rozdiel od štandardného CSS vám Sass/SCSS umožňuje obísť calc() .
Trigonometria- SCSS vám umožňuje písať svoje vlastné (sínusové a kosínusové) funkcie iba pomocou syntaxe Sass/SCSS, podobne ako to môžete urobiť v iných jazykoch, ako je JavaScript.
smernice@na chvíľu a výraz@if-else – Kód CSS môžete napísať pomocou známych prvkov z iných jazykov. Ale nenechajte sa mýliť - konečným výsledkom bude obyčajný CSS.
Mixins (mixins)- sadu vlastností CSS môžete vytvoriť raz a opakovane s nimi pracovať alebo miešať s inými hodnotami. Mixiny možno použiť na vytvorenie samostatných tém rovnakého rozloženia. Mixiny môžu tiež obsahovať celé pravidlá CSS alebo čokoľvek iné povolené v dokumente Sass. Môžu dokonca prijať argumenty, čo vám umožní vytvoriť širokú škálu štýlov s malým počtom mixov.
Funkcie - môžete vytvárať CSS definície ako opätovne použiteľné funkcie.

Preprocesor Sass

Sass nie je dynamický. Nebudete môcť generovať a/alebo animovať vlastnosti a hodnoty CSS v reálnom čase. Môžete však vytvoriť viac efektívnym spôsobom a štandardné vlastnosti (ako CSS animácie) si ich odtiaľ požičajú.

Syntax

SCSS v skutočnosti nepridáva do CSS žiadne nové funkcie okrem novej syntaxe, ktorá často skracuje čas kódovania.

Predpoklady

Existuje 5 CSS preprocesorov: Sass, SCSS, Less, Stylus a PostCSS.

Tento článok sa väčšinou týka SCSS, ktorý je podobný Sass. Viac o týchto preprocesoroch si môžete prečítať na Stack Overflow (originál) alebo na stackoverflow (preložené do ruštiny).

SASS - (.sass) S yntakticky A pekný Sštýl S klobúky.

SCSS - (.scss) Sass r C vzostupne Sštýl S klobúky.

Prípony .sass a .scss sú podobné, ale nie rovnaké. Pre fanúšikov príkazový riadok Tu je postup konverzie:

# Konvertovať zo Sass na SCSS $ sass-convert style.sass style.css # Konvertovať z SCSS na Sass $ sass-convert style.scss style.sass

Sass je prvá špecifikácia pre SCSS s príponou súboru .sass. Jeho vývoj začal už v roku 2006, no neskôr bola vyvinutá alternatívna syntax s príponou .scss.

Poznámka Ostatné preprocesory majú podobnú funkčnosť ako SCSS, ale syntax sa môže líšiť. Tiež všetko, čo funguje v CSS, bude hrať dobre aj v Sass a SCSS.

Premenné

Sass/SCSS umožňuje prácu s premennými. V CSS sú označené dvojitou pomlčkou (--) a v preprocesoroch znakom dolára ($).

$číslo: 1; $farba: #ff0000; $text: "tproger navždy."; $text: "IT navždy." !predvolené; $nic: null;

Premenným, ktoré ešte nemajú hodnotu, môžete priradiť predvolenú hodnotu pridaním štítka !default na koniec hodnoty. V tomto prípade, ak už bola premennej priradená hodnota, nezmení sa; ak je premenná prázdna, bude jej priradená nová špecifikovaná hodnota.

#container ( obsah: $text; )

Premenné v Sass môžu byť priradené k akejkoľvek vlastnosti.

Vnorené pravidlá

Štandardné vnorené prvky CSS využívajúce medzery:

/* Vnorené pravidlá */ #A ( farba: červená; ) #A #B ( farba: zelená; ) #A #B #C p ( farba: modrá; )

Rovnaké vnorené prvky s SCSS:

/* Vnorené pravidlá */ #A ( farba: červená; #B ( farba: zelená; #C p ( farba: modrá; ) ) )

Ako vidíte, syntax vyzerá čistejšie a menej sa opakuje.

To je užitočné najmä pri správe preťažených rozložení. Zarovnanie, v ktorom sú vnorené vlastnosti zapísané v kóde, je teda plne konzistentné so skutočnou štruktúrou rozloženia aplikácie.

V zákulisí ho preprocesor stále skompiluje do štandardného CSS kódu (uvedeného vyššie), aby ho bolo možné zobraziť v prehliadači. Len meníme spôsob písania CSS.

Ampersand

#p ( farba: čierna; a ( hrúbka písma: tučné; &:vznášajte sa ( farba: červená; ) ) )

Pomocou znaku & môžete explicitne určiť, kam sa má vložiť rodičovský selektor.

Výsledok kompilácie Sass (z predchádzajúceho príkladu) do CSS je uvedený nižšie.

#p (farba: čierna;) #p a (hmotnosť písma: tučné;) #p a:hover (farba: červená;)

V dôsledku toho bol ampersand skompilovaný do názvu nadradeného prvku (a:hover).

Mixins (aka mixins)

Mixiny môžu obsahovať aj selektory, vrátane tých s vlastnosťami. A selektory môžu obsahovať odkazy na rodičovský prvok prostredníctvom ampersandu (&), pamätáte si to, však?

Príklad práce s viacerými prehliadačmi

Písanie niektorých vecí v CSS je dosť únavné, najmä v CSS3, kde často potrebujete použiť veľa predpôn dodávateľa (-webkit- alebo -moz-).

Mixiny vám umožňujú vytvárať skupiny deklarácií CSS, ktoré budete musieť na stránke použiť viackrát. Je dobrou praxou používať mixiny pre predpony dodávateľov. Príklad:

@mixin border-radius($radius) ( // Predpony pre: -webkit-border-radius: $radius; // Chrome a Safari -moz-border-radius: $radius; // Firefox -ms-border-radius: $radius; // internet Explorer-o-border-radius: $polomer; // Opera border-radius: $radius; // Štandardné CSS ) // Príklad použitia mixinu border-radius po jeho vytvorení. box ( @include border-radius(10px); )

Aritmetické operácie

Ako v skutočný život, nemôžete pracovať s číslami, ktoré majú nekompatibilné dátové typy (napríklad pridanie px a em).

Sčítanie a odčítanie

p ( font-size: 10px + 2em; // CHYBA! font-size: 10px + 6px; // 16px font-size: 10px + 2; // 12px )

Vždy venujte pozornosť typu pridávaných údajov. Teda pixely na pixely, slony na slony. Odčítanie funguje rovnakým spôsobom, ale so znamienkom mínus.

Príklad odčítania:

Násobenie

Robí sa to presne ako v CSS, s calc(a * b) , ale bez calc a zátvoriek. Okrem toho môžete oddeliť znamienko násobenia medzerami od čísel (5 * 6 == 5 * 6).

Výnimka Nemôžete násobiť pixely medzi sebou. To znamená, 10px * 10px != 100px . 10 pixelov * 10 == 100 pixelov .

P ( šírka: 10px * 10px; // CHYBA! šírka: 10px * 10; // 100px šírka: 1px * 5 + 5px; // 10px šírka: 5 * (5px + 5px); // 50px šírka: 5px + ( 10px / 2) * 3; // 20px )

divízie

Delenie je trochu zložitejšie, ale dá sa na to prísť, pretože v štandardnom CSS je lomka (lomka) vyhradená na použitie krátkej formy zápisu vlastností. Príklad je uvedený nižšie.

/* skratka vlastnosti */ font: italic bold .8em/1.2 Arial, sans-serif; /* štandardný zápis vlastnosti */ font-style: italic; font-weight: bold; font-size: .8em; výška riadku: 1,2; rodina písiem: Arial, bezpätkové;

Existujú traja pomocníci, ktorí naznačia možnosť rozdelenia:

Hodnota (alebo akákoľvek jej časť) je uložená v premennej alebo vrátená funkciou.
Hodnoty sú uvedené v zátvorkách.
Hodnota sa používa ako súčasť iného aritmetického výrazu.

$ var1: 20; $var2: 4; p (horná časť: 16px / 24px; // Vykreslené nezmenené v štandardnom CSS vrchol: (20px / 5px); // Rozdelené (ale iba pri použití zátvoriek) horná časť: #($var1) / #($var2); / / Vykreslené ako normálny CSS, bez rozdelenia top: $var1 / $var2; // Vykonané rozdelenie top: random(4) / 5; // Vykonané rozdelenie (pri spárovaní s funkciou) top: 2px / 4px + 3px; // Delenie je vykoná sa, ak sa pridá ešte jedna aritmetická operácia)

Výsledok kompilácie do CSS:

P ( hore: 16/24 pixelov; hore: 4; hore: 20 / 4; hore: 5; hore: 0,6; hore: 3,5 pixelov; )

Zvyšok

Remainder vypočíta zvyšok operácie delenia. Tu je postup, ako vytvoriť vzor zebry pre zoznam HTML.

@mixin zebra() ( @pre $i od 1 do 7 ( @if ($i % 2 == 1) ( .stripe-#($i) ( farba pozadia: čierna; farba: biela; ) ) ) ) * ( @include zebra(); zarovnanie textu: na stred; )

Vytvorenie zebra mixinu je znázornené v kóde vyššie. Direktívy @for a @if sú popísané v časti nižšie.

Ak chcete vytvoriť vzorku, musíte napísať niekoľko prvkov HTML.

zebra

Výsledok v prehliadači:

Zebra úspešne vygenerovaná pomocou zebra mixin

Porovnávacie operátory

Direktíva @if preberá výraz SassScript a používa v ňom vnorené štýly, ak výraz vracia akúkoľvek hodnotu inú ako false alebo null .

Nasledujúce ukazuje, ako fungujú direktívy @if a @else, keď sú vnorené do mixu.

@mixin spacing($padding, $margin) ( @if ($padding > $margin) ( padding: $padding; ) @else ( padding: $margin; ) ) .container ( @include spacing(10px, 20px); )

Porovnanie v akcii. Miešanie medzier určí veľkosť výplne, ak je väčšia ako okraj.

Po kompilácii do CSS:

Kontajner ( odsadenie: 20px; )

Logické operátory

Popis logických operátorov

Pomocou booleovských operátorov Sass vytvorte tlačidlo, ktoré zmení svoje pozadie na základe jeho šírky.

@mixin button-color ($height, $width) ( @if (($height< $width) and ($width >= 35px)) ( farba pozadia: modrá; ) @else ( farba pozadia: zelená; ) ) .button ( @include button-color(20px, 30px) )

Struny

CSS definuje 2 typy reťazcov: v úvodzovkách a bez úvodzoviek. Sass pozná oboch. Výsledkom je, že v CSS získate typ reťazcov, ktoré ste použili v Sass.

V niektorých prípadoch je možné pridať reťazce k platným hodnotám CSS bez úvodzoviek, ale iba ak je pridaný reťazec konečným prvkom.

P ( font: 50px Ari + "al"; // Kompiluje na 50px Arial )

Nasledujúci príklad ukazuje, čo nerobiť.

P ( font: "50px" + Arial; // CHYBA! )

Môžete pridať riadky odlišné typy ak v nich nie sú medzery. Nižšie uvedený príklad sa nezkompiluje.

P:after ( content: "Priveďte Linusa" + Torvalds!; // CHYBA!)

P:after ( content: "Priveďte Linusa" + "Torvalds!"; // venujte pozornosť "Torvalds!")

Príklad pridania viacerých reťazcov:

P:after ( obsah: "Osud " + "ľudstvo" + "-" + "iterácia."; )

Pridávanie reťazcov a čísel:

P:after ( obsah: "Rekurzia " + 2013 + " osud nebešťanov"; )

Poznámka Vlastnosť content funguje iba s pseudoselektormi :before a :after. Odporúča sa nepoužívať obsah v dokumente CSS, ale použiť ho priamo medzi značkami v HTML.

Vyhlásenia riadenia toku

SCSS má funkcie (fucntion()) a direktívy (@directive). Už sme sa pozreli na príklad funkcie o niečo skôr, keď sme sa pozreli na odovzdávanie argumentov vo vnútri mixinov.

Funkcie sú zvyčajne uvedené v zátvorkách bezprostredne za ich názvom. Direktíva začína symbolom @.

Podobne ako JavaScript, aj SCSS vám umožňuje pracovať so štandardnou sadou príkazov riadenia toku.

ak()

if() je funkcia (a niekedy aj základ umelej inteligencie).

Jeho použitie vyzerá dosť primitívne: operátor vráti jednu z dvoch hodnôt uvedených v podmienke.

/* Použitie funkcie if() */ if (true, 1px, 2px) => 1px; if (false, 1px, 2px) => 2px;

@ak

@if je direktíva používaná na vetvenie na základe podmienky.

/* Použitie direktívy @if */ p ( @if 1 + 1 == 2 ( orámovanie: 1px plné; ) @if 7< 5 { border: 2px dotted; } @if null { border: 3px double; } }

Výsledok kompilácie:

P ( orámovanie: 1px plný; )

Nižšie je kombinovaná vidlica s pridaním direktívy @else.

/* Vytvorenie premennej $type */ $type: river; /* Vyfarbite kontajnery modrou farbou, ak hodnota premennej $type je rieka */ div ( @if $type == rieka ( farba: modrá; ) ) /* Podmienené farby pre text v značke

*/ p ( @if $type == strom ( farba: zelená; ) @else if $type == rieka ( farba: modrá; ) @else if $type == špina ( farba: hnedá; ) )

Kontrola prítomnosti nadradeného prvku

Ampersand vyberie nadradený prvok, ak existuje. V opačnom prípade vráti hodnotu null . Preto sa dá použiť v spojení s direktívou @if.

V nasledujúcich príkladoch sa pozrieme na vytváranie podmienených štýlov CSS v závislosti od prítomnosti nadradeného prvku.

/* Skontrolujte, či rodič existuje */ @mixin does-parent-exist ( @if & ( /* Použiť modrú na rodiča, ak existuje */ &:hover ( color: blue; ) ) @else ( /* Nadradený prvok chýba, použite na odkazy modrú farbu */ a ( farba: modrá; ) ) )

@pre smernicu

Direktíva @for vypíše nastavený počet štýlov. Pre každé opakovanie sa na zmenu výstupu používa premenná počítadla.

Direktíva @for sa opakuje 5-krát.

@for $i od 1 do 5 ( .definition-#($i) (šírka: 10px * $i; ) )

Výsledok kompilácie do CSS:

Definícia-1 ( šírka: 10px; ) .definícia-2 (šírka: 20px; ) .definícia-3 (šírka: 30px; ) .definícia-4 (šírka: 40px; ) .definícia-5 (šírka: 50px; )

@každá smernica

Direktíva @each nastaví $var na každú z hodnôt zoznamu alebo slovníka a vykreslí štýly, ktoré obsahuje, pomocou zodpovedajúcej hodnoty $var .

@každé $zviera v ptakopysovi, levovi, ovci, holubici ( .#($animal)-icon ( background-image: url("/images/#($animal).png") ) )

Výsledok kompilácie do CSS:

Platypus-icon ( background-images: url("/images/platypus.png"); ) .lion-icon ( background-image: url("/images/lion.png"); ) .sheep-icon ( background- obrázok: url("/images/ovce.png"); ) .ikona holubice (obrázok na pozadí: url("/images/holubica.png"); )

príkaz @while

Direktíva @while preberá výraz SassScript a prechádza cez vnorené štýly, kým sa výraz vyhodnotí ako true . Dá sa použiť na vytváranie zložitejších slučiek, než pre ktoré je vhodný @for, hoci je to zriedka potrebné. Napríklad:

$index: 5; @while $index > 0 ( .element-#($index) (šírka: 10px * $index; ) $index: $index - 1; )

Výsledok kompilácie:

Element-5 (šírka: 50px; ) .element-4 (šírka: 40px; ) .element-3 (šírka: 30px; ) .element-2 (šírka: 20px; ) .element-1 (šírka: 10px; )

Funkcie v Sass/SCSS

Pomocou Sass/SCSS môžete používať funkcie rovnako ako v iných jazykoch.

Vytvorme funkciu tristo pixelov (), ktorá vráti 300 pixelov.

@function three-hundred-px() ( @return 300px; ) .name ( width: tristo-px(); orámovanie: 1px plná sivá; display: block; position: absolute; )

Po aplikácii triedy .name bude šírka prvku 300 pixelov.

Ahoj.

Funkcie v Sass môžu vrátiť akúkoľvek platnú hodnotu CSS a môžu byť priradené k akejkoľvek vlastnosti. Môžu byť dokonca vypočítané na základe odovzdaného argumentu.

@funkcia double($width) ( @return $width * 2; )

Trigonometria

Trigonometrické funkcie sin() a cos() sa často nachádzajú ako vstavané triedy v mnohých jazykoch, ako je napríklad JavaScript.

Ich práca stojí za preštudovanie, ak chcete skrátiť čas strávený vývojom animácií používateľského rozhrania, ako je napríklad vytváranie pulzu. Mimochodom, o tom už hovoríme v jednom z článkov. Ale v tomto prípade to bude kód, nie gif-obrázok vložený do HTML dokumentu.

Tu je niekoľko príkladov vytvárania zaujímavých animačných efektov pomocou funkcie sin(), v ktorej je množstvo kódu obmedzené na minimum. Potom môžete tieto znalosti škálovať na vytvorenie prvkov interaktívneho používateľského rozhrania (kruhový pohyb, zvlnená animácia).

Výhodou použitia trigonometrie v kombinácii s CSS je, že neexistujú žiadne dodatočné HTTP požiadavky, ako je to v prípade obrázkov gif.

V Sass môžete písať goniometrické funkcie. Prečítajte si o tom viac.

Písanie vlastných funkcií

V trigonometrii je veľa operácií založených na funkciách. Každá funkcia nadväzuje na druhú. Napríklad funkcia rad() vyžaduje použitie PI() . Funkcie cos() a sin() vyžadujú použitie rad() .

@funkcia PI() ( @návrat 3,14159265359; )

Funkcie písania v Sass/SCSS sú veľmi podobné funkciám písania v iných jazykoch.

Pomocou funkcie pow():

@function pow ($number, $exp) ( $value: 1; @if $exp > 0 ( @for $i od 1 do $exp ( $value: $value * $number; ) ) @else if $exp< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

Pomocou funkcie rad():

@funkcia rad ($uhol) ( $jednotka: jednotka ($uhol); $unitless: $uhol / ($uhol *0 + 1); //Ak je uhol v stupňoch ("stupeň"), preveďte ho na radiány @if $unit == stupeň ( $unitless: $unitless / 180 * PI(); ) @return $unitless; )

Na výpočet tangens pomocou funkcie tan() je potrebné použiť funkcie sin() a cos().

Preprocesor CSS (preprocesor CSS)je doplnok k CSS, ktorý pridáva nové funkcie a funkcie do CSS pridávaním syntaktických konštrukcií.

Účel preprocesorov: poskytovanie pohodlnej syntaxe pre webového vývojára na zjednodušenie a zrýchlenie vývoja a údržby štýlov v projektoch.

Predprocesory CSS robia kód napísaný pomocou jazyka preprocesora čistý a platný.

Pomocou preprocesorov sa váš písaný kód stáva: čitateľným pre človeka, štruktúrovaným a logickým, produktívnym.

Medzi najpopulárnejšie preprocesory patriaMenej, Sass (Scss), Stylus. Tiež menej nápadné nástroje v tejto oblasti sú Closure Stylesheets, CSS Crush, na ktorých sú menej populárne tento moment, no stále ich niektorí vývojári používajú. Pokúsme sa pochopiť možnosti a vlastnosti Less, Sass (Scss), Stylus.

Štandardné použitie CSS je pomerne zložité. Syntax bez vnorenia je priam ťažká pre zrakové vnímanie. Absencia normálnych premenných a funkcií spôsobuje, že kód CSS je úzky a s mnohými nadbytočnými a zbytočnými detailmi.

Dostupná dokumentácia – teraz môže každý zvládnuť vybraný preprocesor v krátkom čase bez toho dodatočné náklady. Druhou výhodou je jednoduchosť použitia preprocesorov. Ak to chcete urobiť, stačí nainštalovať špeciálny program, ktorý bude sledovať súbory určené pre preprocesor a pri ich zmene skompiluje obsah týchto súborov do čistého CSS kódu.

Pre pokročilejších používateľov sú tu špeciálne zostavovatelia projektov.

Menejje najpopulárnejší a najčastejšie používaný preprocesor. Navrhnuté na založené na JavaScripte, obsahuje základné vlastnosti preprocesorov, ale neposkytuje podmienené štruktúry a slučky v pre nás obvyklom zmysle. Vďaka svojej jednoduchosti a stručnosti existuje štandardná syntax pre CSS a možnosť rozšírenia funkčnosti prostredníctvom fungovania pluginov.

LESS poskytuje dynamické funkcie pre CSS: premenné, mixiny, operácie a funkcie. Dokumentácia je veľmi priateľská pre vývojárov a syntax je veľmi podobná čistému CSS. Populárne frameworky ako napr Twitter Bootstrap, aktívne využívať dynamické funkcie LESS. LESS však umožňuje znovu použiť triedy ako mixiny kdekoľvek v šablóne štýlov.

Ďalším výkonným a obľúbeným preprocesorom jeSass. Okolo tohto nástroja sa vytvorila obrovská komunita vývojárov. Bol založený v roku 2007 ako modul pre HAML a je napísaný v Ruby (poskytuje C++ port). V porovnaní s Less má širokú škálu funkcií. Preprocesor rozširuje svoju funkčnosť o knižnicu Compass, ktorá vám umožňuje ísť nad rámec CSS a pracovať vo väčšom meradle. Poskytuje dva druhy syntaxe: Sass (Syntactically Awesome Style Sheets) je jednoduchšia syntax CSS založená na identite. Považuje sa za staršiu verziu. Scss (Sassy CSS) je založený na štandardnej syntaxi CSS.

- pomerne mladý, ale už perspektívny preprocesor CSS. Vyvinutý už v roku 2010. Mnohí ho považujú za pohodlný a rozšíriteľný preprocesor a flexibilnejší ako Sass. Vyvinuté v JavaScripte. Existuje podpora mnohých možností syntaxe od podobných CSS po jednoduchšie a ľahšie.

Užitočné nástroje pre vývojárov:

kódová súprava: skompiluje súbory Sass, LESS a Stylus a po aktualizácii súborov automaticky znovu načíta webový prehliadač. Vrátane optimalizuje obrazy projektov s cieľom zlepšiť výkon systému. Technológia je platená, no existuje aj skúšobná verzia na prácu.
LiveReload: skontroluje zmeny v súboroch, potom ich spracuje a automaticky znova načíta webový prehliadač. Verzia funguje pre Mac a Windows.
Skaut: Pracuje s Sass a Compass v prostredí Ruby. Funguje pre Mac a Windows.
JEDNODUCHÉ: jednoduchý a jednoduchý LESS CSS kompilátor pre Mac a Windows.

Aby ste si vybrali ten správny preprocesor pre vašu prácu, vyskúšajte niekoľko. A podľa výsledkov testu sa vám bude výber oveľa ľahšie. A tiež nezabudnite, že pri ovládaní preprocesora sa neučíte nový jazyk, ale práve sa učíte novú syntax a funkcie. Spoločnosť ™ prajem príjemnú prácu vo svete CSS!

2545 krát Dnes zobrazené 1 krát

Článok NetTuts+ napísal Johnathan Croom v roku 2012.

Hlavným účelom článku je ukázať výhodu použitia ktoréhokoľvek z troch preprocesorov, ktoré sú v ňom opísané Sass, LESS a Stylus. Recenzia je ideálna pre začiatočníkov, ktorí práve objavujú tento aspekt webového dizajnu.

V tomto článku sa pozrieme na výhody a výhody používania troch rôznych preprocesorov – Sass, LESS a Stylus.

Úvod

Predprocesory CSS boli vytvorené s jediným cieľom pridať výkon a flexibilitu do šablón štýlov CSS bez toho, aby bola ohrozená kompatibilita medzi rôznymi prehliadačmi. Všetky preprocesory kompilujú kód vytvorený pomocou ich syntaxe do štandardného kódu CSS, ktorému rozumie a používa každý prehliadač, bez ohľadu na to, aký je starý ( prehliadač) nebol.

Preprocesory prinášajú do tabuliek mnoho výhod css štýly a v tomto článku sa budeme zaoberať iba niektorými z nich, dobre známymi a nie príliš bežnými. Začnime s recenziou.

Syntax

Najdôležitejšou časťou pri písaní kódu v akomkoľvek CSS preprocesore je jeho syntax. Našťastie pre nás je syntax všetkých troch preprocesorov, na ktoré sa pozrieme, podobná CSS.

Sass & LESS

Preprocesory Sass aj LESS majú štandardnú syntax CSS. Vďaka tomu je úloha prevodu už existujúceho kódu CSS do syntaxe ktoréhokoľvek z týchto preprocesorov rýchla a jednoduchá. Sass používa príponu pre svoje súbory

.scss

, LESS - predĺženie

.menej

Vzhľad bežného súboru v syntaxi Sass alebo LESS je uvedený nižšie:

/* style.scss alebo style.less */ h1 ( farba : #0982c1 ; )

Jasne vidíte, že ide o bežnú syntax CSS, ktorá sa dokonale prevádza na Sass (SCSS) alebo LESS.

Je dôležité poznamenať, že Sass (SCSS) má tiež staršiu verziu syntaxe Sass, ktorá vynecháva bodkočiarky a zložené zátvorky.

Aj keď je táto syntax stále použiteľná v praxi, je zastaraná a v našich príkladoch ju nebudeme používať.

Sass syntax ( stará verzia ) nasledovne:

/* style.sass */ farba h1 : 0982c1

stylus

Pre svoje súbory tento preprocesor používa príponu

.štýl

. Syntax preprocesora Stylus je podrobnejšia ( približne. prekladateľ: autor tu niečo pokazil) používa ako základ štandardnú syntax CSS, ale umožňuje rôzne kombinácie zátvoriek, dvojbodiek a bodkočiarok.

Príklady syntaxe dotykového pera:

/* Syntax podobná CSS */ h1 ( farba : #0982C1 ; ) /* kučeravé zátvorky sú vynechané */ h1 farba : #0982C1 ; /* zložené zátvorky, dvojbodky a bodkočiarky sú vynechané */ h1 farba #0982C1

Všetky vyššie uvedené syntaxe sú platné a budú kompilované do správneho CSS. Tento kód sa napríklad skompiluje do štandardného CSS bez chýb:

h1 ( farba #0982c1 ) h2 veľkosť písma : 1 .2em

Premenné

V preprocesoroch sú premenné deklarované a používané v súboroch štýlu CSS. Premenné môžu nadobudnúť akúkoľvek hodnotu povolenú v CSS (farba, číslo alebo text) a možno na ne odkazovať odkiaľkoľvek v dokumente CSS.

Sass

V preprocesore Sass je premenná deklarovaná so symbolom

, pričom názov a hodnota premennej sú navzájom oddelené dvojbodkou, ako sa to robí v CSS: $ mainColor : #0982c1 ; $ siteWidth: 1024px; $ borderStyle: bodkovaný; telo ( farba : $mainColor ; border : 1px $borderStyle $mainColor ; max-width : $siteWidth ; )

MENEJ

Premenné v LESS sú úplne rovnaké ako v Sass, ibaže pred názvom premennej je uvedený symbol

: @mainColor : #0982c1 ; @siteWidth : 1024px ; @borderStyle : bodkovaný ; telo ( farba : @ mainColor ; orámovanie : 1px @ borderStyle @ mainColor ; max-width : @ siteWidth ; )

stylus

Premenné v dotykovom pere nepotrebujú žiadne znamienko, aby ich deklarovali, ale stále môžu používať symbol

, ale keď je táto premenná volaná v kóde, nenastane žiadna náhrada hodnoty premennej.

Inými slovami, nasledujúca operácia sa nevykoná:

mainColor = #0982c1 siteWidth = 1024px $borderStyle = bodkovaná farba tela mainColor border 1px $borderStyle mainColor max-width siteWidth

Kompilovaný CSS

Každý zo súborov prezentovaných ako príklad sa skompiluje do presne rovnakého kódu CSS. Môžete použiť svoju predstavivosť, aby ste si predstavili, aké užitočné môžu byť premenné.

Vďaka nim nie je potrebné nastavovať hodnotu farby a následne ju dvadsaťkrát opakovať v CSS kóde. Alebo bola nastavená úloha zmeniť šírku stránky a na to je potrebné „prehrabať sa“ kódom pri hľadaní tejto hodnoty.

Nižšie je uvedený kód CSS po kompilácii:

telo ( farba : #0982c1 ; orámovanie : 1 pixel bodkovaný #0982c1 ; max-width : 1024px ; )

Hniezdenie

Ak je úlohou kódu CSS súčasne pristupovať k viacerým prvkom, ktoré majú rovnakého rodiča, potom je písanie tohto rodiča znova a znova únavnou úlohou.

Napríklad takto:

Namiesto toho môžeme pomocou sily preprocesora umiestniť všetky podradené selektory do zátvoriek nadradeného prvku. Okrem toho symbol

je odkaz ( zníženie) do selektora nadradeného prvku.

Sass, LESS & Stylus

Všetky tri preprocesory majú presne rovnakú syntax pre vnorené selektory:

sekcia ( margin : 10px ; nav ( height : 25px ; a (color : #0982C1 ; &:hover (text-decoration : underline; ) ) ) )

Kompilovaný CSS

Nižšie je uvedený skompilovaný výsledok vyššie uvedeného kódu CSS. Porovnajte s kódom, ktorý sme napísali na úplnom začiatku - úplne rovnaký. Ale aké pohodlné je využiť výhody preprocesora!

section ( margin : 10px ; ) section nav ( height : 25px ; ) section nav a ( color : #0982C1 ; ) section nav a :hover ( text-decoration : underline ; )

Mixins

mixíny

sú funkcie, ktoré umožňujú opätovné použitie zoskupených vlastností v kóde CSS. Namiesto toho, aby ste museli prechádzať celým kódom a hľadať správne riadky na ich zmenu, teraz môžete vykonať zmeny iba raz, v mixine.

Miešanie je užitočné najmä pri vytváraní štýlov špecifických pre prvky alebo predpony prehliadača. Keď sa vo vnútri selektora CSS zavolá mixin, rozpoznajú sa jeho argumenty a potom sa jeho štýly aplikujú na selektor, ktorý ho vyvolal.

Poznámka. translator: v nižšie uvedených príkladoch by ste mali venovať pozornosť rozdielom v syntaxi pre deklarovanie a volanie mixinu vo vnútri selektora CSS pre všetky tri preprocesory.

Sass

/* Sass mixin s názvom chyba s argumentom $borderWidth, ktorý má predvolenú hodnotu 2px */@mixin error ($ borderWidth : 2px ) ( border : $ borderWidth solid #F00 ; color : #F00 ; ) .generic-error ( padding : 20px ; margin : 4px ; @include error(); ) .login-error (vľavo) : 12px; pozícia: absolútna; hore: 20px; @include error(5px); )

MENEJ

/* MENEJ chyby s názvom mixu s argumentom $borderWidth, ktorý má predvolenú hodnotu 2px */.error (@borderWidth : 2px ) ( border : @ borderWidth solid #F00 ; color : #F00 ; ) .generic-error ( padding : 20px ; margin : 4px ; .error(); /* Chyba s názvom mixin je pripojená */) .login-error ( left : 12px ; position : absolute ; top : 20px ; .error(5px); /* Chyba s názvom mixin je zahrnutá s argumentom $borderWidth nastaveným na 5px; to znamená, že hodnota argumentu je predefinovaná */ }

štýl

/* Dotykové pero s názvom chyba s argumentom $borderWidth, ktorý má predvolenú hodnotu 2px */ error (borderWidth = 2px ) ( border : borderWidth solid #F00 ; color : #F00 ; ) .generic-error ( padding : 20px ; margin : 4px ; error(); /* Chyba s názvom mixin je pripojená */) .login-error ( left : 12px ; position : absolute ; top : 20px ; error(5px); /* Chyba s názvom mixin je zahrnutá s argumentom $borderWidth nastaveným na 5px; to znamená, že hodnota argumentu je predefinovaná */ }

Kompilovaný CSS

Výsledkom kompilácie zo všetkých troch preprocesorov bude rovnaký kód CSS:

.generic-error ( padding : 20px ; margin : 4px ; border : 2px solid #f00 ; color : #f00 ; ) .login-error ( left : 12px ; position : absolute ; top : 20px ; border : 5px solid #f00 ; farba: #f00 ;)

Dedičnosť

Pri písaní štýlov CSS „klasickým“ spôsobom, aby sme použili rovnaké vlastnosti na viacero prvkov v dokumente HTML, vytvorili by sme kód takto:

p , ul , ol ( /* tu sú niektoré štýly */ }

Všetko funguje skvele. Ak však chcete písať štýly samostatne pre ktorýkoľvek z týchto selektorov, budete musieť vytvoriť samostatné pravidlá pre každý z nich. A kód šablóny štýlov sa okamžite stane nedbalým a ťažko udržiavateľným.

Naproti tomu sa používa dedičnosť. Dedičnosť je schopnosť niektorých selektorov CSS dediť vlastnosti od iného selektora.

Poznámka. prekladač: dávajte pozor na rovnakú syntax pre pripojenie (deklarovanie) dedičnosti vo vnútri selektora CSS pomocou direktívy
1 @predĺžiť
.

Sass & Stylus

.blok ( margin : 10px 5px ; padding : 2px ; ) p ( @extend .block; border : 1px solid #EEE ; ) ul , ol ( @extend .block; /* Zdediť vlastnosti z triedy selector.block */

Kompilovaný CSS

.block , p , ul , ol ( margin : 10px 5px ; padding : 2px ; ) p ( border : 1px solid #EEE ; ) ul , ol ( color : #333 ; text-transform : large ; )

MENEJ

Preprocesor LESS plne nepodporuje dedenie tak, ako to robia Sass alebo Stylus. Namiesto pridávania viacerých selektorov do jednej množiny vlastností sa s dedičstvom zaobchádza ako s mixom bez argumentov.

Pre každý selektor sa importujú štýly. opačná strana Tento prístup spočíva v neustálom opakovaní riadkov s vlastnosťami v zostavenom CSS štýle.

Takto môže vyzerať MENEJ kódu s dedičnosťou:

.blok ( margin : 10px 5px ; padding : 2px ; ) p ( .block; border : 1px solid #EEE ; ) ul , ol ( .block; /* Zdediť vlastnosti z triedy selector.block */ farba : #333 ; text-transform : veľké písmená ; )

Kompilovaný CSS

.block ( margin : 10px 5px ; padding : 2px ; ) p ( margin : 10px 5px ; padding : 2px ; border : 1px solid #EEEE ; ) ul , ol ( margin : 10px 5px ; padding : #3px ; color : transformácia textu: veľké písmená ;)

Ako môžete jasne vidieť z kódu, štýly triedy

Importuje sa

V komunite CSS na import štýlov pomocou smernice

@import

existuje pretrvávajúci negatívny postoj, pretože tento prístup generuje viacero HTTP požiadaviek na server, čo spomaľuje prehliadač a načítava samotný server. V preprocesoroch však technológia importu funguje inak.

V ktoromkoľvek z troch preprocesorov importovanie jedného súboru do druhého skutočne vedie k tomu, že kód z jedného súboru sa pri kompilácii vloží do druhého, čo vedie k jedinému súboru CSS.

Poznámka. prekladač: inými slovami, v preprocesoroch je import potrebný na zostavenie jedného súboru z viacerých. V štandardnom CSS má import za následok nahradenie jedného kódu iným.

Upozorňujeme, že pri kompilácii súboru so štandardným pripojením pomocou smernice

1	@import "file.css"

vnútri nej nedochádza ku kompilácii toho druhého. Ale mixiny alebo premenné sa importujú a použijú v súbore štýlu podľa očakávania. Technológia importu je veľmi pohodlná, pretože vám umožňuje vytvoriť veľa jednotlivé súbory pre správnu organizáciu projektu. /* súbor.(typ) */ telo ( pozadie : #EEE ; ) @import "reset.css" ; @import "subor.(typ)" ; p ( pozadie : #0982C1 ; )

Kompilovaný CSS

@import "reset.css" ; telo ( pozadie : #EEE ; ) p ( pozadie : #0982C1 ; )

Farebné funkcie

Funkcie "farba" sú navrhnuté tak, aby transformovali farby pri kompilácii. Takéto funkcie sú mimoriadne užitočné pri vytváraní prechodov a pri stmavovaní farieb

1	vznášať sa

a oveľa viac.

Sass

zosvetliť ($ farba, 10 %); stmaviť ($ farba , 10 %); nasýtený($farba, 10%); desaturate($color , 10%); odtiene sivej($farba); /* vráti odtiene šedej $color */ doplnok($farba); /* vráti farbu doplnku $color */ invert($farba); /* vráti obrátenú farbu z $color */ mix($color1 , $color2 , 50%);

Vyššie uvedený kód je len krátky zoznam farebných funkcií v Sass. Úplný zoznam všetkých dostupných funkcií sa nachádza v dokumentácii Sass.

Funkcie „Farba“ je možné použiť všade tam, kde chcete pracovať s farbami v kóde. Jednoduchý príklad – deklaruje sa premenná s farbou, na ktorú sa ďalej v kóde aplikuje funkcia stmievania farieb

stmaviť

: $farba : #0982C1 ; h1 ( pozadie : $color ; orámovanie : 3px plné stmavenie ($color , 50 % ); )

MENEJ

zosvetliť (@farba, 10 %); /* vráti farbu o 10 % svetlejšiu ako $color */ stmaviť (@color, 10%); /* vráti farbu o 10 % tmavšiu ako $color */ nasýtený (@color, 10 %); /* vráti farbu o 10 % sýtejšiu ako $color */ /* vráti farbu o 10 % menej nasýtenú ako $color */ spin (@farba, 10); /* vráti farbu posunutú o 10 stupňov doprava od @color */ spin (@farba, -10); /* vráti farbu posunutú o 10 stupňov doľava od @color */ mix (@farba1, @farba2); /* vráti výsledok zmiešania farby $color1 s farbou $color2 */

Zoznam funkcií preprocesora LESS nájdete na oficiálnej stránke projektu LESS Documentation.

Nasleduje príklad toho, ako možno v LESS použiť funkcie „color“:

@color : #0982C1 ; h1 ( pozadie : @ farba ; orámovanie : 3 pixely plné stmavenie ( @ farba , 50 % ); )

stylus

Úplný zoznam všetkých farebných funkcií predprocesora Stylus je k dispozícii na stránke projektu Dokumentácia stylusu.

A príklad použitia funkcie „color“ v Styluse:

farba = #0982C1 h1 farba pozadia orámovanie 3px plné stmavenie (farba , 50 %)

Aritmetické operácie

Vďaka preprocesorom je teraz vykonávanie aritmetických operácií v kóde CSS jednoduché a ľahké. Táto funkcia je často užitočná.

Poznámka. prekladač: za zmienku stojí funkcia z CSS3 podľa názvu
1 calc()
, ktorý tiež umožňuje vykonávať jednoduché aritmetické operácie v kóde CSS.

Sass, LESS & Stylus

telo ( okraj : (14px / 2 ); hore : 50px + 100px ; vpravo : 100px - 50px ; vľavo : 10 * 10; )

Praktické príklady

Pozreli sme sa teda na hlavné body toho, čo a ako všetky tri preprocesory dokážu. Nikdy sme sa však nedotkli pointy praktické uplatnenie tieto možnosti. Nižšie je uvedený zoznam skutočných webových aplikácií, ktoré využívajú preprocesory, pričom výrazne zlepšujú celý kód.

Predpony prehliadača

Jedným z najjasnejších príkladov výhod používania preprocesorov je písanie vlastností s predponami prehliadača pomocou nich. Po vytvorení mixu s podporou prefixov prehliadača si ušetríme rutinnú prácu.

Napríklad vytvorte mix na zaoblenie rohov bloku pre všetky tri predprocesory:

Sass

@mixin border-radius ($values ) ( -webkit-border-radius : $values ; -moz-border-radius : $values ; border-radius: $values ; ) div ( @include border-radius(10px); )

MENEJ

.border-radius (@values ) ( -webkit-border-radius : @ values ; -moz-border-radius : @ values ; border-radius : @ values ; ) div ( .border- polomer(10px); )

stylus

border-radius (hodnoty) ( -webkit-border-radius : hodnoty; -moz-border-radius : hodnoty; border-radius : values ; ) div ( border-radius(10px); )

Kompilovaný CSS

div ( -webkit-border-radius : 10px ; -moz-border-radius : 10px ; border-radius : 10px ; )

3D text

Vytvorenie 3D efektu pre text pomocou vlastnosti CSS

1	textový tieň

je skvelý nápad. Jediným problémom je práca s farbou, ktorá je dosť náročná a ťažkopádna.

Pomocou mixinov a farebných funkcií môžeme vytvárať 3D text a meniť jeho farbu za chodu:

Sass

@mixin text3d ($color ) ( farba : $color ; tieň textu : 1px 1px 0px stmaviť ($ farba, 5% ), 2px 2px 0px stmaviť($ farba, 10% ), 3px 3px 0px stmaviť($ farba, 15% ), 4px 4px 0px stmaviť($ farba, 20% ), 4px 4px 2px #000 ; } h1 { veľkosť písma: 32b; @include text3d(#0982c1); }

MENEJ

.text3d(@farba) { farba: @ farba; textový tieň: 1px 1px 0px stmaviť(@ farba, 5% ), 2px 2px 0px stmaviť(@ farba, 10% ), 3px 3px 0px stmaviť(@ farba, 15% ), 4px 4px 0px stmaviť(@ farba, 20% ), 4px 4px 2px #000 ; } rozpätie { veľkosť písma: 32b; .text3d(#0982cl); }

stylus

text3d(farba) farba: farba textový tieň: 1px 1px 0px stmaviť(farba, 5 %), 2px 2px 0px stmaviť(farba, 10 %), 3px 3px 0px stmaviť(farba, 15 %), 4px 4px 0px stmaviť(farba, 20 %), 4px 4px 2px #000 rozpätie veľkosť písma: 32b text3d(#0982c1)

V príklade Stylus som sa rozhodol pre zápis vlastnosti

1	textový tieň

na jednom riadku, keďže som tu vynechal kučeravé zátvorky.

Kompilovaný CSS

rozpätie { veľkosť písma: 32b; farba: #0982c1; textový tieň: 1px 1px 0px #097bb7, 2px 2px 0px #0875ae, 3px 3px 0px #086fa4, 4px 4px 0px #07689a, 4px 4px 2px #000 ; }

reproduktory

Použitie premenných a číselných hodnôt pre tieto premenné ma napadlo, keď som sa prvýkrát začal zoznamovať s možnosťami CSS preprocesorov. Deklarovaním šírky rozloženia vo vnútri premennej sa táto šírka zmení ( Ak je to nevyhnutné) jednoduché a rýchle:

Sass

$ siteWidth: 1024 pixelov; $ šírka odkvapu: 20 pixelov; $ sidebarWidth: 300 pixelov; telo { marža: 0 auto; šírka: $ siteWidth; } .obsah { plavák: vľavo; šírka: $ siteWidth - ($ sidebarWidth+$ šírka odkvapu); } .bočný panel { plavák: vľavo; ľavý okraj: $ šírka odkvapu; šírka: $ sidebarWidth; }

MENEJ

@siteWidth: 1024 pixelov; @gutterWidth: 20 pixelov; @sidebarwidth: 300 pixelov; telo { marža: 0 auto; šírka: @ siteWidth; } .obsah { plavák: vľavo; šírka: @ siteWidth - (@ sidebarWidth[chránený e-mailom] šírka odkvapu); } .bočný panel { plavák: vľavo; ľavý okraj: @ šírka odkvapu; šírka: @ sidebarWidth; }

stylus

siteWidth = 1024 pixelov; šírka odkvapu = 20 pixelov; sidebarWidth = 300 pixelov; telo { marža: 0 auto; šírka: siteWidth; } .obsah { plavák: vľavo; šírka: siteWidth - (sidebarWidth+ šírka odkvapu); } .bočný panel { plavák: vľavo; ľavý okraj: šírka odkvapu; šírka: sidebarWidth; }

Kompilovaný CSS

telo { marža: 0 auto; šírka: 1024 pixelov; } .obsah { plavák: vľavo; šírka: 704 pixelov; } .bočný panel { plavák: vľavo; ľavý okraj: 20 pixelov; šírka: 300 pixelov; }

Niektoré triky s preprocesorom

Pri práci s preprocesormi CSS existuje niekoľko trikov. V tomto článku sa budem venovať len niektorým z nich. Ale ak vás táto téma zaujíma, odporúčam vám pozorne si prečítať oficiálnu dokumentáciu, alebo ešte lepšie začať používať preprocesor každý deň pri kódovaní.

Chybná správa

Ak už dlhšie píšete CSS kód, tak ste sa pravdepodobne stretli so situáciou, kedy sa do kódu vkradla chyba, ktorú neviete nijakým spôsobom nájsť. Ak ste sa ocitli v presne rovnakej situácii, potom vás môžem potešiť - existuje spôsob, ako vyriešiť takýto problém.

Predprocesory CSS môžu hlásiť chyby v kóde a prinútiť ich, aby tak urobili, je pomerne jednoduché. V tomto prípade vám preprocesor sám povie, kde sa chyba nachádza v kóde CSS ( a všetci sú šťastní).

Ak máte záujem o túto funkciu vo všetkých troch preprocesoroch, potom tento článok podrobne popisuje, ako vykonať toto nastavenie.

Absolútne všetci skúsení dizajnéri rozloženia používajú preprocesory. Neexistujú žiadne výnimky. Ak chcete byť v tejto činnosti úspešní, nezabudnite na tieto programy. Na prvý pohľad môžu v začiatočníkovi vyvolať tichú hrôzu - to je už príliš podobné programovaniu! V skutočnosti môžete zistiť všetky funkcie preprocesorov CSS za približne jeden deň, a ak sa pokúsite, aj za pár hodín. V budúcnosti vám výrazne zjednodušia život.

Ako vznikli predprocesory CSS

Aby sme lepšie pochopili vlastnosti tejto technológie, ponorme sa v krátkosti do histórie vývoja vizuálnej reprezentácie webových stránok.

Keď sa masové používanie internetu práve začalo, neexistovali žiadne štýly. Dokumentácia závisela výlučne od prehliadačov. Každý z nich mal svoje vlastné štýly, ktoré sa používali na spracovanie určitých značiek. Stránky teda vyzerali odlišne 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 nórsky učenec Haakon Lee vyvinul štýlový list, ktorý by sa dal použiť na zdobenie vzhľad stránky oddelené od dokumentu HTML. Nápad sa zapáčil zástupcom konzorcia W3C, ktorí ho okamžite začali zdokonaľovať. O niekoľko rokov neskôr bola zverejnená prvá verzia špecifikácie CSS. Potom sa neustále zdokonaľoval, zdokonaľoval... Ale koncept zostal rovnaký: každý štýl má určité vlastnosti.

Používanie tabuliek CSS bolo vždy problematické. Napríklad dizajnéri rozloženia mali často problémy s triedením a zoskupovaním vlastností a dedenie tiež nie je také jednoduché.

A potom prišli roky 2000. Značkovaním sa čoraz viac začali zaoberať profesionálni front-end vývojári, pre ktorých bola dôležitá flexibilná a dynamická práca so štýlmi. CSS, ktoré v tom čase existovalo, vyžadovalo podporu prefixov a sledovania pre nové funkcie prehliadača. Potom sa odborníci na JavaScript a Ruby pustili do práce a vytvorili preprocesory – doplnky pre CSS, ktoré doň pridávajú nové funkcie.

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

Vykonávajú niekoľko funkcií:

zjednotiť predpony prehliadača a hacky;

zjednodušiť syntax;

umožňujú bezchybnú prácu s vnorenými selektormi;

zlepšiť stylingovú logiku.

V skratke: preprocesor pridáva k možnostiam CSS programovaciu logiku. Teraz sa styling nerobí obvyklým vymenovaním štýlov, ale pomocou niekoľkých jednoduchých trikov a prístupov: premenné, funkcie, mixiny, slučky, podmienky. Okrem toho bola možnosť využiť matematiku.

Vidiac popularitu takýchto doplnkov, W3C začalo postupne pridávať funkcie z nich do kódu CSS. Takto sa napríklad v špecifikácii objavila funkcia calc(), ktorú podporujú mnohé prehliadače. Očakáva sa, že čoskoro bude možné nastavovať premenné a vytvárať mixiny. To sa však stane v ďalekej budúcnosti a preprocesory sú už tu a fungujú skvele.

Populárne CSS preprocesory. Sass

Vyvinuté v roku 2007. Spočiatku to bola súčasť Hamla, nástroja na vytváranie šablón HTML. Vývojári Ruby on Rails prevzali novú kontrolu nad prvkami CSS a začali ju šíriť všade. Sass má obrovské množstvo funkcií, ktoré sú teraz zahrnuté v každom preprocesore: premenné, vnorené selektory, mixíny (potom ste k nim však nemohli pridávať argumenty).

Deklarovanie premenných v Sass

Premenné sú deklarované znakom $. Môžete si do nich uložiť vlastnosti a ich sady, napríklad: “$borderSolid: 1px solid red;”. V tomto príklade sme deklarovali premennú nazvanú borderSolid a uložili sme do nej hodnotu 1px plné červené. Ak teraz v CSS potrebujeme vytvoriť 1px široký červený okraj, stačí zadať túto premennú za názov vlastnosti. Po deklarovaní sa premenné nedajú zmeniť. K dispozícii je niekoľko vstavaných funkcií. Napríklad deklarujme premennú $redColor s hodnotou #FF5050. Teraz v kóde CSS vo vlastnostiach nejakého prvku pomocou neho nastavíme farbu písma: p ( farba: $redColor; ). Chcete experimentovať s farbou? Použite funkciu stmavenia alebo zosvetlenia. Toto sa robí takto: p ( farba: stmaviť($redColor, 20%); ). Vďaka tomu bude červená farba o 20 % svetlejšia.

Hniezdenie

Predtým sme na označenie hniezdenia museli používať dlhé a nemotorné konštrukcie. Predstavme si, že máme div, ktorý obsahuje p a v ňom sa nachádza span. Pre div musíme nastaviť farbu písma na červenú, pre p - žltú, pre span - ružovú. V normálnom CSS by sa to urobilo takto:

Používaním css preprocesor všetko je jednoduchšie a kompaktnejšie:

Prvky sú doslova vnorené jeden do druhého.

Direktívy preprocesora

Súbory môžete importovať pomocou direktívy @import. Napríklad máme súbor fonts.sass, ktorý deklaruje štýly pre písma. Zahrnieme ho do hlavného súboru style.sass: @import 'fonts'. Pripravený! Namiesto jedného veľký súbor so štýlmi máme niekoľko, ktoré možno použiť na rýchly a jednoduchý prístup k požadovaným vlastnostiam.

Mixins

Jeden z najzaujímavejších nápadov. Umožňuje nastaviť celý súbor vlastností v jednom riadku. Pracujte nasledovne:

@mixinlargeFont(

font-family: 'Times New Roman';

veľkosť písma: 64px;

line-height: 80px;

font-weight: bold;

Ak chcete použiť mixin na prvok na stránke, používame direktívu @include. Napríklad ho chceme použiť na nadpis h1. Výsledkom je nasledujúca konštrukcia: h1 ( @include: largeFont; )

Všetky vlastnosti z mixinu budú priradené elementu h1.

Menej predprocesora

Syntax Sass pripomína programovanie. Ak hľadáte možnosť, ktorá je vhodnejšia pre začínajúcich študentov CSS, pozrite si Menej. Bol vytvorený v roku 2009. Hlavná prednosť- natívna podpora, aby ho ľahšie zvládli dizajnéri rozloženia, ktorí nie sú oboznámení s programovaním.

Premenné sú deklarované symbolom @. Napríklad: @fontSize: 14px;. Hniezdenie funguje na rovnakých princípoch ako v Sass. Mixiny sú deklarované takto: .largeFont() ( font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; ). Na pripojenie nepotrebujete používať direktívy preprocesora – stačí pridať čerstvo vytvorený mixin do vlastností vybraného prvku. Napríklad: h1 ( .largeFont; ).

stylus

Ďalší preprocesor. Vytvorené v roku 2011 tým istým autorom, 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 implicitná možnosť. Ale $font = 'Times New Roman' je explicitné. Mixiny sú deklarované a zahrnuté implicitne. Syntax je: redColor() farba červená. Teraz ho môžeme pridať do prvku, napríklad: h1 redColor();.

Stylus sa na prvý pohľad môže zdať mätúci. Kde sú „natívne“ zátvorky a bodkočiarky? Ale akonáhle sa do toho ponoríte, všetko bude oveľa jasnejšie. Majte však na pamäti, že zdĺhavý vývoj s týmto preprocesorom vás môže „odučiť“ od používania klasickej syntaxe CSS. To niekedy spôsobuje problémy, keď potrebujete pracovať s „čistými“ štýlmi.

Ktorý preprocesor si vybrať?

Je to naozaj... na tom nezáleží. Všetky možnosti poskytujú približne rovnaké možnosti, len syntax je pre každú inú. Odporúčame postupovať takto:

ak ste programátor a chcete pracovať so štýlmi, ako je kód, použite Sass;
ak ste návrhár rozloženia a chcete pracovať so štýlmi ako normálne rozloženie, venujte pozornosť 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 vývoj ešte zjednodušiť. Používatelia Sass sa vyzývajú, aby sa pozreli na Compass, výkonný nástroj s mnohými vstavanými funkciami. Napríklad po inštalácii sa už nikdy nebudete musieť starať o predpony dodávateľov. Jednoduchšia práca so sieťami. Existujú pomôcky na prácu s farbami, škriatkami. K dispozícii je množstvo už ohlásených mixinov. Venujte tomuto nástroju niekoľko dní - v budúcnosti tak ušetríte veľa času a úsilia.

A kedy sa títo vývojári konečne upokoja a prestanú šikanovať nováčikov!? Zatiaľ sa mi to nepodarilo zistiť. css a hovoria mi: „Všetci skutoční dizajnéri rozloženia už dávno prešli na preprocesory. css v predvečer roku 2020!" Čo robiť?

Po prvé, vývojári nikdy neprestanú prichádzať s novými technológiami. A profesionálni sadzači sú im za to veľmi vďační. Jazyk šablóny štýlov css, vynájdený v čase, keď boli webové stránky primitívne. Ale roky plynuli, stránky sa stali zložitejšími a masívnejšími, ale metódy usporiadania zostali rovnaké. Kóderov omrzelo písanie podobných častí kódu. Na stránke nebolo možné rýchlo zmeniť farbu. Existuje potreba väčšej automatizácie rozloženia, a tak sa objavilo CSS preprocesory kód. A dnes budeme hovoriť o jednom z nich, MENEJ predprocesora.

Kompilácia kódu LESS a VS

Všetko, čo potrebujete skompilovať MENEJ kód je editor kódu VS kód a rozšírenie Ľahko Menej. Ako to funguje?

Vytvorte súbor štýlu s príponou .menej
Po uložení sa automaticky vygeneruje .css súbor do rovnakého priečinka.

Zakaždým, keď uložíte zmeny, MENEJ súbory sú kompilované do css súbory. Prehliadače sa ešte nenaučili rozumieť MENEJ, potrebujú css kód.

MENEJ premenných

Najčastejšie používané vlastnosti sa presúvajú do premenných. Stránka zvyčajne používa opakujúce sa farby a rodiny písiem. Všetky farby zadáme do premenných a potom do pravidla dosadíme nie kód farby, ale premennú. Pýtate sa: "V čom je háčik? Každopádne potrebujem niečo predpísať, aký je v tom rozdiel?"

Hlavnou vlastnosťou je rýchla zmena farby. Farba sa zmení iba raz, v premennej. Nahradením farby v jednej premennej sa nahradí farba na všetkých stránkach lokality. Na začatie používania stačí táto funkcia MENEJ. oznamujeme premenné v MENEJ a uložíme do nich hodnoty, ktoré potrebujeme, dáme premenným zmysluplné názvy.

@primárne: #194eb4;
@sekundárne: #f2b834;
@úspech: #4cb514;
@čierna: #000;
@biela: #fff;

Teraz napíšeme obvyklý kód, ako sme to urobili v css, ale namiesto hodnôt dosadíme premenné.

MENEJ

div (
výplň: 0;

farba: @black;
}

Po uložení sa skompiluje css kód. Vôbec sa nedotýkame css súbor, všetka práca sa vykonáva v MENEJ súbor. Do premenných môžete uložiť akékoľvek často sa opakujúce vlastnosti.

css

div (
výplň: 0;
rodina písiem: Roboto, bezpätkové;
farba: #000;
}

Mixins v MENEJ

Mixins užitočné pre opätovné použitie súbor vlastností - rámčeky, tlačidlá, nadpisy. Zoskupená množina vlastností, ktoré možno použiť na rôzne selektory.

Stránka má niekoľko tlačidiel rovnakého typu rôznych farieb, ale s rovnakými vlastnosťami písma. Vytvárame mix, ktorý pomáha automatizovať proces vytvárania tlačidiel.

button_font(

text-transform: veľké písmená;
veľkosť písma: 18px;
}

Zmiešame vlastnosti tlačidlového selektora.

Portfolio__button (
výplň: 15px 80px;
farba: #344258;
.button_font;
}

Na výstupe dostaneme:

Portfolio__button (
výplň: 15px 80px;
farba: #344258;
font-family: "DIN Pro Bold";
text-transform: veľké písmená;
veľkosť písma: 18px;
}

Symbol ampersandu

Namiesto duplikovania názvu selektora používame znak ampersand.

Portfolio__item(
poloha: relatívna;
farba pozadia: #3c3c3c;
}
&: vznášať sa (
farba pozadia: #ccc;
}
}

css

.portfolio__item (
poloha: relatívna;
farba pozadia: #3c3c3c;
}
.portfolio__item:hover (
farba pozadia: #ccc;
}

Mediálne dopyty v MENEJ

Dotazy na médiá môžete zapisovať priamo do selektora.

MENEJ

.header_title(
farba: #344258;
veľkosť písma: 40px;

výplň: 020px;
@media only obrazovka a (maximálna šírka: 320px)(
veľkosť písma: 22px;
}
}

css

.header_title(
farba: #344258;
veľkosť písma: 40px;
rodina fontov: "DIN Pro", bezpätkové;
výplň: 020px;
}
@media only obrazovka a (maximálna šírka: 320px) (
.header_title(
veľkosť písma: 22px;
}
}

Záver

Tento článok neprezrádza ani 25% všetkých možností, ktoré ponúka MENEJ. Áno, nie je to potrebné, účelom článku je motivovať začiatočníkov, aby začali používať preprocesory. Začnite tým najjednoduchším, postupne prejdite k zložitejšiemu.