Prečo sme začali používať preprocesor Stylus v Yandex.Mail a tiež o knižnici, ktorá nám pomáha žiť s IE. CSS Preprocessor: Prehľad, Voľba, Aplikácia

CSS je zámerne jednoduchý jazyk. S rozširovaním komplexných webových aplikácií, vznikom pozície front-end vývojárov a rastúcim počtom nových požiadaviek táto jednoduchosť rýchlo mizne. Pre nezasvätených rozširujú predprocesory CSS (najmä Sass, LESS a Stylus) možnosti štýlu o ďalšie funkcie, ako sú premenné, vnorenie a mixy, čím získate oveľa väčšiu kontrolu nad veľká kvantitaštýlov.

Nedostatok v článkoch propagujúcich používanie predprocesorov a poskytovanie stručný návod na nich, v posledné roky nie a mnohé momenty už boli celkom dobre vymaľované. Zamerajme sa teda na to, čo sa často prehliada a uvidíme, čo môžeme urobiť proti terminálovým riešeniam.

Úvod (voliteľné)

Ako bolo uvedené v úvode, veci ako Sass, LESS a Stylus nám poskytujú dodatočná funkčnosť cez CSS, ale súbory napísané v týchto jazykoch musia byť skompilované do CSS predtým, ako sa prehliadač pokúsi niečo v nich analyzovať. AT všeobecný prípad, proces kompilácie je automatizovaný takým spôsobom, aby sa negoval akýkoľvek vplyv na pracovný tok.

Použitím ktoréhokoľvek z uvedených preprocesorov môžete využiť nasledujúce výhody:

Expresivita: Každý z preprocesorov obsahuje sadu konvencií šetriacich čas, ktorých podstata spočíva v voliteľnosti, prípadne odmietnutí rôznych pravidiel interpunkcie. V závislosti od vašich preferencií môžu byť štýly zbavené zátvoriek, bodkočiarok a/alebo obyčajných čiarok. Navyše všetky podporujú vkladanie selektorov.

Rozšírená funkčnosť: Tieto jazyky v rôznej miere ponúkajú pridané vlastnosti formovať naše štýly; to zahŕňa mixiny (časti opätovne použiteľného kódu, ktoré môžu mať voliteľné argumenty), rozšírenia (dedenie triedy) a podporu premenných.

Doplnky: na rozšírenie štandardného arzenálu sa veľmi často používajú rôzne doplnky. Sass má Compass , Stylus má hrot a hoci je to iný príbeh, Bootstrap bez úvodu je vyrobený s LESS.

Skutočný prínos

V skutočnosti hlavná výhoda preprocesorov spočíva v menšej námahe – nie fyzickej (menej časté stláčanie kláves), ale psychickej. Preprocesory vám poskytujú efektívny spôsob, ako odstrániť časť únavnej psychickej záťaže a menej prepínať medzi rôznymi aplikáciami, čo je typické pre front-end vývoj. Máte bežne používanú hodnotu farby? Uložte ho do premennej namiesto toho, aby ste ho hľadali v projekte alebo si ho uchovávali v pamäti. Potrebujete predvídateľne a jednoducho zmeniť farbu? SASS má sadu farebných operácií, ktoré nerobia nič iné, len eliminujú potrebu siahnuť po najbližšom výbere farieb.

Implementáciou preprocesora máte možnosť sústrediť sa priamo na štýly písania. Aritmetika responzívneho dizajnu funguje priamo v šablóne so štýlmi bez prepínania na kalkulačku. Compass sa o škriatok môže postarať za vás. Rozdelenie štýlov do modulárnych súborov a ich následné kombinovanie bez zásahu do výkonu je bezproblémové.

Základná myšlienka je, že: tieto jazyky vám to umožňujú zamerať sa na riešenie problémov namiesto toho, aby vás rozptyľovali nástroje a prepínanie kontextu.

Bezbolestná kompilácia

Hlavná prekážka začatia Použitie CSS preprocesorov zvyčajne nejde o nepochopenie toho, či je to dobré alebo zlé - ľudia sú vystrašení návrhom nainštalovať balík pomocou príkazového riadka alebo konfiguračnej perspektívy sledovať výrazy. Našťastie sa všetky tieto problémy dajú obísť, ak zrazu terminál nie je vašou silnou stránkou.

Priamo v prehliadači

Nie ste si celkom istí? Pozrite sa na tieto implementácie preprocesorov v prehliadači.

Využiť skutočnú silu preprocesora CSS je dobrodružstvo. Existuje nespočetné množstvo jazykov, syntaxí a funkcií, všetko pripravené na použitie práve teraz.

V tomto článku sa pozrieme na rôzne možnosti a výhody použitia troch rôznych predprocesorov: Sass, LESS a Stylus.

Úvod

Preprocesory vytvárajú CSS, ktoré funguje vo všetkých prehliadačoch.

Preprocesory CSS3 sú jazyky napísané s jediným cieľom pridať do CSS skvelé, vynaliezavé funkcie bez narušenia kompatibility prehliadača. Robia to kompiláciou kódu, ktorý napíšeme, do obyčajného CSS, ktorý možno použiť v akomkoľvek prehliadači, späť do doby kamennej. Existujú tisíce funkcií, ktoré predprocesory prinášajú, a v tomto článku sa pozrieme na niektoré z publikovaných a na niektoré bez názvu. Začnime.

Syntax

najviac dôležitá časť písanie kódu v preprocesore CSS je pochopenie syntaxe. Našťastie pre nás je syntax (alebo môže byť) identická s bežným CSS pre všetky tri preprocesory.

Sass &LESS

Sass a LESS používajú štandardnú syntax CSS. To zjednodušuje konverziu existujúci súbor css do preprocesora. Sass používa príponu .scss a LESS príponu .less. Súbor Base Sass alebo LESS je možné prispôsobiť nasledujúcim spôsobom:

/* style.scss alebo style.less */
h1 (
farba: #0982C1;
}

Ako vidíte, je to len obyčajný CSS, ktorý sa perfektne skompiluje v Sass aj LESS.

Je dôležité poznamenať, že Sass má tiež staršiu syntax, ktorá vynecháva bodkočiarky a zložené zátvorky. Zatiaľ čo je stále k dispozícii, je zastaraný a v tomto príklade ho nebudeme používať. Syntax používa príponu .sass a vyzerá takto:

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

stylus

Syntax pre Stylus je oveľa podrobnejšia. Použitím prípony súboru .styl Stylus akceptuje štandardnú syntax CSS, ale akceptuje aj niektoré ďalšie variácie, v ktorých sú zátvorky, dvojbodky a bodkočiarky voliteľné. Napríklad:

/* štýl. štýl */
h1 (
farba: #0982C1;
}
/* vynechať zátvorky */
h1
farba: #0982C1;
/* vynechať dvojbodky a bodkočiarky */
h1
farba #0982C1

Použitie rôznych variácií v jednej šablóne štýlov je tiež platné, takže ďalšia sa zostaví bez chyby.

H1(
farba #0982c1
}
h2
veľkosť písma: 1,2 em

Premenné

Premenné je možné deklarovať a používať v celej šablóne štýlov. Môžu mať akúkoľvek hodnotu, ktorá je hodnotou CSS (napríklad farby, čísla [povolené jednotky] alebo text.) a možno na ne odkazovať kdekoľvek v našej šablóne so štýlmi.

Sass

Premenné Sass sa pridávajú so symbolom $ a hodnota a názov sú oddelené bodkočiarkou, rovnako ako vlastnosť CSS.

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: bodkovaný;
telo (
farba: $mainColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}

MENEJ

Premenné LESS sú presne rovnaké ako premenné Sass, až na to, že názvy premenných sú doplnené znakom @.

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: bodkovaný;
telo (
farba: @mainColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}

stylus

Nie je potrebné k nim pripájať premenné dotykového pera, aj keď to umožňuje použitie symbolu $. Ako vždy, bodkočiarka na konci sa nevyžaduje, ale medzi hodnotou a premennou je znamienko rovnosti. Treba si uvedomiť, že Stylus (0.22.4) sa skompiluje, ak k názvu premennej pridáme symbol @, ale pri odkazovaní nepoužijeme hodnotu. Inými slovami, nerobte to.

MainColor = #0982c1
siteWidth = 1024 pixelov
$borderStyle = bodkovaný
telo
farba mainColor
border 1px $borderStyle mainColor
max-width siteWidth

Kompilovaný CSS

Každý z vyššie uvedených súborov bude skompilovaný s rovnakým CSS. Môžete použiť svoju predstavivosť, aby ste videli, aké užitočné sú premenné. Už nemusíme meniť jednu farbu a opakovať ju dvadsaťkrát, alebo chceme zmeniť šírku našej stránky a musíme ju hľadať, aby sme ju našli. Tu je CSS po kompilácii:

Telo(
farba: #0982c1;
orámovanie: 1px bodkovaný #0982c1;
maximálna šírka: 1024 pixelov
}

Príloha

Ak v našom CSS potrebujeme odkazovať na viacero prvkov s rovnakým nadradeným prvkom, môže byť únavné písať nadradený prvok znova a znova.

Sekcia (
okraj: 10px
}
sekcia navig(
výška: 25px;
}
navigácia sekcie (
farba: #0982C1;
}
sekcia nav a:hover (
text-dekorácia: podčiarknutie;
}

Namiesto toho môžeme pomocou preprocesora zapísať podradené selektory do zátvoriek rodiča. Okrem toho znak & označuje rodičovský selektor.

Sass, LESS a Stylus

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

Sekcia (
okraj: 10px
navigácia (
výška: 25px;
a (
farba: #0982C1;
&: vznášať sa (
text-dekorácia: podčiarknutie;
}
}
}
}

Kompilovaný CSS

Toto je skompilovaný CSS z vyššie uvedeného kódu. Je to presne to isté, ako keď sme začínali – aké pohodlné!

Sekcia (
okraj: 10px
}
sekcia navig(
výška: 25px;
}
navigácia sekcie (
farba: #0982C1;
}
sekcia nav a:hover (
text-dekorácia: podčiarknutie;
}

Mixins

Mixiny sú funkcie, ktoré umožňujú opätovné použitie vlastností v našej šablóne so štýlmi. Namiesto toho, aby sme prechádzali celým naším štýlom a niekoľkokrát menili vlastnosť, teraz ju môžeme zmeniť v našom mixine. To môže byť skutočne užitočné pre konkrétny štýl prvkov a predpony dodávateľa. Keď sú mixiny volané z CSS selektora, argumenty mixinu sú rozpoznané a štýly v mixine sú aplikované na selektor.

Sass

/* Sass mixin chyba s(voliteľné) argument $borderWidth, ktorý je predvolene nastavený na 2px, ak nie je zadaný */
@mixin error($borderWidth: 2px) (
orámovanie: $borderWidth solid #F00;
farba: #F00;
}
.generic-error(
výplň: 20px
okraj: 4px
@include error(); /* Aplikuje štýly z chyby mixin */
}
.login-error(
vľavo: 12px;
pozícia: absolútna;
hore: 20px;
@include error(5px); /* Aplikuje štýly z chyby mixin s argumentom $borderWidth rovným 5px*/
}

MENEJ

/* MENEJ zmiešanej chyby s (voliteľným) argumentom @borderWidth, ktorý je štandardne nastavený na 2px, ak nie je zadaný */
.error(@borderWidth: 2px) (
ohraničenie: @borderWidth solid #F00;
farba: #F00;
}
.generic-error(
výplň: 20px
okraj: 4px
.chyba(); /* Aplikuje štýly z chyby mixin */
}
.login-error(
vľavo: 12px;
pozícia: absolútna;
hore: 20px;
.error(5px); /* Aplikuje štýly z chyby mixin s argumentom @borderWidth rovným 5px */
}

stylus

/* Chyba miešania dotykového pera s (voliteľným) argumentom borderWidth, ktorý je štandardne nastavený na 2px, ak nie je zadaný */
error(borderWidth=2px) (
ohraničenie: ohraničenieŠírka plná #F00;
farba: #F00;
}
.generic-error(
výplň: 20px
okraj: 4px
chyba(); /* Aplikuje štýly z chyby mixin */
}
.login-error(
vľavo: 12px;
pozícia: absolútna;
hore: 20px;
chyba(5px); /* Aplikuje štýly z chyby mixin s argumentom borderWidth rovným 5px */
}

Kompilovaný CSS

Všetky preprocesory tvoria rovnaký kód:

všeobecná chyba (
výplň: 20px
okraj: 4px
orámovanie: 2px plné #f00;
farba: #f00;
}
.login-error(
vľavo: 12px;
pozícia: absolútna;
hore: 20px;
orámovanie: 5px plné #f00;
farba: #f00;
}

Dedičnosť

Pri písaní CSS staromódnym spôsobom by sme mohli použiť nasledujúci kód na aplikovanie rovnakých štýlov na viacero prvkov súčasne:

P,
ul
ol(
/* štýly tu */
}

Funguje to skvele, ale ak potrebujeme jednotlivé prvky ďalej štylizovať, pre každý je potrebné vytvoriť iný selektor a rýchlo sa to môže stať neporiadnejším a náročnejším na údržbu. Aby ste tomu zabránili, môžete použiť dedičnosť. Dedičnosť je schopnosť iných selektorov CSS zdediť vlastnosti iného selektora.

Sass & Stylus

.block(
okraj: 10px 5px;
výplň: 2px
}
p(
@predĺžiť
okraj: 1px plný #EEE;
}
ul, ol (
farba: #333;
text-transform: veľké písmená;
}

Kompilovaný CSS (Sass & Stylus)

.blok, p, ul, ol (
okraj: 10px 5px;
výplň: 2px
}
p(
okraj: 1px plný #EEE;
}
ul, ol (
farba: #333;
text-transform: veľké písmená;
}

MENEJ

LESS v skutočnosti nepodporuje dedenie štýlu ako Sass a Stylus. Namiesto pridávania viacerých selektorov do rovnakej množiny vlastností zaobchádza s dedičstvom ako s mixom bez argumentov a importuje štýly do svojich vlastných selektorov. Nevýhodou je, že vlastnosti sa opakujú v zostavenom šablóne so štýlmi. Tu je postup, ako to nastaviť:

Blokovať (
okraj: 10px 5px;
výplň: 2px
}
p(
.blok; /* Zdediť štýly z ".block" */
okraj: 1px plný #EEE;
}
ul, ol (
.blok; /* Zdediť štýly z ".block" */
farba: #333;
text-transform: veľké písmená;
}

Kompilovaný CSS (LESS)

.block(
okraj: 10px 5px;
výplň: 2px
}
p(
okraj: 10px 5px;
výplň: 2px
okraj: 1px plný #EEE;
}
ul
ol(
okraj: 10px 5px;
výplň: 2px
farba: #333;
text-transform: veľké písmená;
}

Ako môžete vidieť, do selektorov boli vložené štýly z .block, ktoré by sme chceli zdediť. Je dôležité poznamenať, že priorita sa tu môže stať problémom, takže buďte opatrní.

Importovať

V komunite CSS je importovanie CSS odsudzované, pretože vyžaduje viacero požiadaviek HTTP. Import s preprocesorom však funguje inak. Ak importujete súbor z ktoréhokoľvek z troch preprocesorov, bude to doslova zahŕňať import v čase kompilácie, čím sa vytvorí iba jeden súbor. Uvedomte si, že import bežných .css súborov sa štandardne skompiluje s @import "file.css"; kód. Tiež mixiny a premenné môžu byť importované a použité vo vašej hlavnej šablóne so štýlmi. Import vytvára tvorbu jednotlivé súbory pre organizáciu je veľmi užitočné.

Sass, LESS a Stylus

/* typ súboru) */
telo (
pozadie: #EEE;
}
@import "reset.css";
@import "súbor. (typ)";
p(
pozadie: #0982C1;
}

Kompilovaný CSS

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

Farebné funkcie

Farebné funkcie sú zabudované do funkcií, ktoré transformujú farbu pri kompilácii. To môže byť mimoriadne užitočné pri vytváraní prechodov tmavé farby vedenie a oveľa viac.

Sass

zosvetliť ($ farba, 10 %); /* vráti farbu o 10 % svetlejšiu ako $color */
stmaviť ($ farba, 10 %); /* vráti farbu o 10 % tmavšiu ako $color */
nasýtený($farba, 10%); /* vráti farbu o 10 % sýtejšiu ako $color */
desaturate($color, 10%); /* vráti farbu o 10 % menej nasýtenú ako $color */
odtiene sivej($farba); /* vráti odtiene šedej $color */
doplnok($farba); /* vráti farbu doplnku $color */
invert($farba); /* vráti invertovanú farbu $color */
mix($color1, $color2, 50%); /* zmiešanie $color1 s $color2 s hmotnosťou 50% */

Je to len krátky zoznam dostupné farebné funkcie v Sass, úplný zoznam dostupných farebných funkcií v Sass nájdete v dokumentácii Sass.

Farebné funkcie možno použiť všade tam, kde sa používajú farby. Tu je príklad:

$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ť (@farba, 10 %); /* vráti farbu o 10 % tmavšiu ako @color */
nasýtený (@farba, 10 %); /* vráti farbu o 10 % sýtejšiu ako @color */
desaturate (@farba, 10 %); /* vráti farbu o 10 % menej nasýtenú ako @color */
spin(@farba, 10); /* vráti farbu s o 10 stupňov väčším odtieňom ako @color */
spin(@farba, -10); /* vráti farbu s o 10 stupňov menším odtieňom ako @color */
mix(@farba1, @farba2); /* vráti kombináciu @color1 a @color2 */

Zoznam všetkých funkcií LESS nájdete v dokumentácii LESS.

Tu je príklad použitia funkcie farieb v LESS:

@farba: #0982C1;
h1 (
farba pozadia;
orámovanie: 3px plné stmavenie(@farba, 50%);
}

stylus

zosvetliť (farba, 10 %); /* vráti farbu o 10 % svetlejšiu ako "color" */
stmavené (farba, 10 %); /* vráti farbu o 10 % tmavšiu ako "color" */
nasýtený (farba, 10 %); /* vráti farbu o 10 % sýtejšiu ako "farba" */
desaturate (farba, 10%); /* vráti farbu o 10 % menej nasýtenú ako "farba" */

Úplný zoznam všetkých farebných funkcií dotykového pera nájdete v dokumentácii dotykového pera.

Tu je príklad použitia funkcií farieb dotykového pera:

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

Operácie

Matematika v CSS je celkom užitočná a teraz je celkom možná. Je to jednoduché a takto sa to robí:

Sass, LESS a Stylus

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

Praktické aplikácie

Zaoberali sme sa mnohými funkciami a novými funkciami, ktoré preprocesory dokážu, ale neprebrali sme nič praktické alebo praktické. Tu je krátky zoznam aplikácií z reálneho sveta, kde je použitie preprocesora záchranou.

Predpony predajcu

Toto je jeden z dôvodov, prečo použiť preprocesor a má to veľmi dobrý dôvod – ušetrí to veľa času a sĺz. Vytvorenie mixu na spracovanie prefixov dodávateľa je jednoduché a ušetrí veľa opakovania a bolestivých úprav. Postup:

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-radius(10px);
}

stylus

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

Kompilovaný CSS

div (
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
okraj-polomer: 10px
}

3D text

Predstieranie 3D textu pomocou viacerých textových tieňov je šikovný nápad. Jediným problémom je, že zmena farby po skutku je náročná a ťažkopádna. Pomocou mixinov a farebných funkcií môžeme vytvárať 3D text a meniť farbu za chodu!

Sass

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

MENEJ

.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;
}
rozpätie (
veľkosť písma: 32pt
.text3d(#0982cl);
}

stylus

text3d (farba)
farba: farba
text-shadow: 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
kúpele
veľkosť písma: 32pt
text3d(#0982c1)

Textové tiene stylusu som sa rozhodol napísať na jeden riadok, pretože som vynechal zložené zátvorky.

Kompilovaný CSS

rozpätie (
veľkosť písma: 32pt
farba: #0982c1;
text-shadow: 1px 1px 0px #097bb7,
2px 2px 0px #0875ae,
3px 3px 0px #086fa4,
4px 4px 0px #07689a,
4px 4px 2px #000;
}

Konečný výsledok

stĺpci

Používanie numerických operácií a premenných pre stĺpce je nápad, s ktorým som sa stretol, keď som sa prvýkrát hral s preprocesormi CSS. Deklarovaním požadovanej šírky v premennej ju môžeme ľahko zmeniť na ceste bez akejkoľvek mentálnej matematiky. Tu je postup:

Sass

$siteWidth: 1024px;
$gutterWidth: 20px;
$sidebarWidth: 300px;
telo (
okraj: 0 auto;
šírka: $siteWidth;
}
.content(
plavák: vľavo;
šírka: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar(
plavák: vľavo;
margin-left: $gutterWidth;
šírka: $sidebarWidth;
}

MENEJ

@siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarWidth: 300px;
telo (
okraj: 0 auto;
šírka: @siteWidth;
}
.content(
plavák: vľavo;
šírka: @siteWidth - (@ [e-mail chránený]);
}
.sidebar(
plavák: vľavo;
margin-left: @gutterWidth;
šírka: @sidebarWidth;
}

stylus

siteWidth = 1024px;
GutterWidth=20px;
sidebarWidth = 300px;
telo (
okraj: 0 auto;
šírka: siteWidth;
}
.content(
plavák: vľavo;
šírka: siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar(
plavák: vľavo;
margin-left: GutterWidth;
šírka: sidebarWidth;
}

Kompilovaný CSS

telo (
okraj: 0 auto;
šírka: 1024px;
}
.content(
plavák: vľavo;
šírka: 704px;
}
.sidebar(
plavák: vľavo;
ľavý okraj: 20px;
šírka: 300px
}

Pozoruhodná slušnosť

Používanie preprocesora CSS má niekoľko zvláštností. Uvediem niekoľko zábavných, ale ak máte naozaj záujem nájsť ich všetky, odporúčam vám prehrabať sa dokumentáciou, alebo ešte lepšie, začať používať preprocesor pri každodennom kódovaní.

Hlásenia chýb

Ak ste napísali CSS za nejaký slušný čas, som si istý, že ste sa dostali do bodu, kedy ste sa niekde pomýlili a jednoducho ste to nevedeli nájsť. Ak ste ako ja, určite ste strávili deň vyťahovaním vlasov a komentovaním rôznych vecí, aby ste vystopovali plošticu.

Preprocesory CSS hlásia chyby. Všetko je jednoduché. Ak s vaším kódom niečo nie je v poriadku, povie vám, kde, a ak budete mať šťastie: prečo. Ak vás zaujíma, ako sa hlásia chyby v rôznych preprocesoroch, môžete si pozrieť tento blogový príspevok.

Ak vezmeme do úvahy preprocesory spolu s CSS, potom je obraz jasnejší, ako keby sme samostatne uvažovali o koncepte preprocesora.

Definícia

CSS preprocesor(z anglického CSS preprocessor) je doplnok k CSS, ktorý pridáva do CSS predtým nedostupné funkcie pomocou nových syntaktických konštruktov.

Hlavnou úlohou preprocesora je poskytnúť vývojárovi pohodlné konštrukty syntaxe s cieľom zjednodušiť, a tým urýchliť vývoj a údržbu štýlov v projektoch.

Preprocesory CSS konvertujú kód napísaný pomocou jazyka preprocesora na čistý a platný kód CSS.

Pomocou preprocesorov môžete napísať kód, ktorý sa zameriava na:

• ľudská čitateľnosť
• Štruktúrované a logické
• Výkon

A to je len malá časť toho, čo vám preprocesor môže poskytnúť. Ale nepredbiehaj.

Syntaktický cukor

Predtým, než prejdeme k ďalšej diskusii o CSS preprocesoroch, aktualizujme našu slovnú zásobu o nový pojem – „syntaktický cukor“.

Syntaktický cukor(z angl. syntaktický cukor) sú doplnkami k syntaxi programovacieho jazyka, ktoré neprinášajú žiadne významné zmeny ani nové funkcie, ale robia tento jazyk pre človeka čitateľnejším.

Syntaktický cukor zavádza do jazyka alternatívy záznamy o konštrukciách vložených v tomto jazyku. Alternatívny zápis treba chápať ako kratší resp pohodlné dizajny pre osobu, ktorú nakoniec preprocesor skonvertuje na pôvodný jazyk bez syntaktického cukru.

Ak sa pokúsite aplikovať tento koncept na preprocesory CSS, potom to vo všeobecnosti úplne popisuje ich podstatu. Ešte raz pripomeniem, že hlavnou úlohou preprocesorov je zjednodušiť a zrýchliť vývoj, ale ako inak sa to dá urobiť, ak sa nezavedú alternatívne možnosti zápisu?

Čo sú preprocesory CSS?

Je čas prejsť na viac konkrétne príklady, konkrétne samotné CSS preprocesory. V čase písania tohto článku existujú tri populárne preprocesory:

• Sass (SCSS)
• stylus

A pár menších hráčov pre nás:

• Uzávierka štýlov
• CSS Crush

O prvých troch si povieme samostatne o niečo nižšie, no o posledných dvoch už nebude, pre ich neobľúbenosť, vôbec reč. Ak chcete, popisy týchto preprocesorov možno ľahko nájsť vo vyhľadávači.

Aký má zmysel používať preprocesory?

Ako som uviedol vyššie, hlavnými výhodami sú čitateľnosť kódu, štruktúrovanie a zlepšenie výkonu.

Existujú aj ďalšie dôvody, prečo začať používať preprocesor už dnes. Chcem na to upozorniť, pretože vývojári kedysi a mnohí stále odmietajú používať preprocesory, zdajú sa im komplikované, nezrozumiteľné a zbytočné.

CSS je ťažké

Štandardné CSS je zložité. Nevnorená syntax, ktorú ponúkajú preprocesory CSS, je jednoducho ťažko vizualizovateľná. Pri hniezdení si navyše musíte zapamätať meno rodiča. Nedostatok normálnych premenných a „funkcií“ spôsobuje, že kód CSS je chaotický a úzkoprsý.

Dostupná dokumentácia

Časy, keď dokumentácia od preprocesorov bola dostupná len pre ľudí, ktorí majú „informácie“, sú preč. Teraz môže každý rýchlo zvládnuť ktorýkoľvek z preprocesorov as nimi minimálne náklady sily.

Jednoduchosť použitia

Používanie preprocesorov je jednoduchšie ako predtým a oveľa jednoduchšie. K tomu si stačí nainštalovať program, ktorý bude sledovať súbory určené pre preprocesor a keď sa zmenia, 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. Nemyslite si, že ak používate preprocesorový program a nie tvorca projektov, nie ste dostatočne cool. V skutočnosti takéto montážne firmy ponúkajú plnú kontrolu a pokročilé nastavenia namiesto toho, aby ste sa stali Jediom.

Štruktúra a logika kódu

Najpopulárnejšou funkciou, ktorú ponúka každý predprocesor CSS, je schopnosť vkladať selektory do seba. Teraz neuvediem príklad, pretože Menej funkcií, vrátane vnorenia, bude popísané v príslušnej časti knihy. V tomto bode všetko, čo potrebujete vedieť, je, že pri použití preprocesorov môžete jeden selektor vložiť do druhého a ďalší do tretieho, výsledkom čoho je niečo, čo vyzerá ako obsah knihy:

1. Rodičovský volič 1.1. Vnorený selektor 1.2. Vnorený volič 1.2.1. Vnorený selektor 1.3. Vnorený volič

Samozrejme, v skutočný život selektory nemôžu začínať číslami, ale na vytvorenie paralely medzi vnorením a obsahom si myslím, že toto vynechanie je tu vhodné.

nečistoty

Stručne povedané, používanie nečistoty(z angličtiny Mixins), môžete kód urobiť opakovane použiteľným. To pomáha vyhnúť sa pomocným triedam v označovaní alebo duplicitným vlastnostiam zo selektora na selektor.

Modularita

Ďalším bonusom, ktorý by ma presvedčil, aby som práve teraz začal používať CSS preprocesor, by bola možnosť vnorovať súbory do súborov, teda inými slovami spájať súbory v danej sekvencii. Áno, dá sa to zariadiť čistý CSS, ale v spojení s ďalšími funkciami sa ukazuje ako veľmi výkonný nástroj.

Zároveň dostávame možnosť zdieľať moduly (knižnice nečistôt), ktoré sme vytvorili pre vlastnú potrebu a považovali sme ich za užitočné pre iných ľudí. Ukázalo sa, že každý vývojár si môže stiahnuť vašu knižnicu a použiť ju na svoje vlastné účely, pričom podľa potreby volá mixiny, ktoré ste napísali.

Prečo nepočkať na vývoj CSS?

Vývoj CSS je vo veľmi malých a neistých krokoch, keďže W3C uprednostňuje rýchlosť CSS (výkon). Na jednej strane je to správne a veľmi dôležité, no na druhej strane je to nedostatok pohodlia pre vývojárov.

Ako príklad uvediem jednu zo špecifikácií CSS4, ktorá bola predstavená pod tlakom vývojárov – rodičovský selektor. Takáto dlhá cesta od nápadu k rozhodnutiu bola spôsobená tým, že W3C považovalo takýto selektor za pomalý a jeho ďalšie používanie na stránkach by viedlo k divokým brzdám. Samozrejme, hovoríme o rozšírenom používaní tohto selektora, a nie o ojedinelých prípadoch.

V blízkej budúcnosti teda nečakajte revolúcie a zmeny, ktoré môžu zatieniť funkčnosť a možnosti CSS preprocesorov.

Druhy preprocesorov

Samozrejme, ako v každej inej oblasti, vždy existuje konkurencia a na trhu s preprocesormi sú teraz tri hlavné bojujúce tábory:

• Sass (SCSS)
• stylus

Nazývam ich bojovými, pretože každý prívrženec jedného z preprocesorov považuje za svoju povinnosť vylievať špinu na predstaviteľov iných, povedzme, priznaní. Táto nechuť je častá najmä medzi fanúšikmi preprocesora Sass, ktorý je považovaný za najstarší a najvýkonnejší zo všetkých troch preprocesorov.

Pre úplnosť chcem uviesť stručné zhrnutie každého preprocesora:

Menej

Vlastne hrdina tejto knihy. Najpopulárnejší preprocesor v čase písania. Založené v roku 2009 Alexisom Sellierom a napísané v JavaScripte (pôvodne napísané v Ruby, ale Alexis urobil správny krok v správnom čase). Má všetky základné vlastnosti preprocesorov a ešte viac, ale nemá podmienené štruktúry a slučky v bežnom zmysle pre nás. Hlavnou výhodou je jeho jednoduchosť, takmer štandardná syntax pre CSS a možnosť rozšírenia funkcionality prostredníctvom systému pluginov.

Sass (SCSS)

Najvýkonnejší z predprocesorov CSS. Má pomerne veľkú komunitu vývojárov. Založený v roku 2007 ako modul pre HAML a napísaný v Ruby (existuje port C++). V porovnaní s Less má oveľa väčší rozsah funkcií. Možnosti samotného preprocesora rozširuje multifunkčná knižnica Compass, ktorá umožňuje ísť nad rámec CSS a pracovať napríklad so spritmi v automatickom režime.

Má dve syntaxe:

• Sass (Syntactically Awesome Style Sheets) je zjednodušená syntax CSS, ktorá je založená na identite. Považované za zastarané.
• SCSS (Sassy CSS) – vychádza zo štandardnej syntaxe CSS.

stylus

Najmladší, no zároveň najperspektívnejší CSS preprocesor. V roku 2010 ju založil TJ Holowaychuk, v našich kruhoch známa osobnosť. Hovorí sa, že toto je najpohodlnejší a najrozšíriteľnejší preprocesor a je tiež flexibilnejší ako Sass. Napísané v JavaScripte. Podporuje veľa možností syntaxe od podobných CSS až po zjednodušené (chýbajúce: , ; , () a niektoré zátvorky).

Ak ste súčasťou front-endovej scény, možno ste už počuli o Stylus, vzdialenom príbuznom jazyku preprocesorov Sass, ktorého nikto v skutočnosti nepozná. Rovnako ako Sass, aj Slylus je CSS preprocesor napísaný v Node.js. Podľa webovej služby GitHub sa definuje ako:

[…] nový revolučný jazyk, ktorý poskytuje efektívny, dynamický a expresívny spôsob vytvárania CSS.

No povedzme, že použitie slova „revolučný“ je tu trochu prehnané. Ale všetko ostatné je pravda. "Čo? Ďalší?" pýtate sa. "Tak nejako," odpovedám. Stylus však nie je vôbec nový jazyk. Svoju existenciu začala približne začiatkom roku 2011, ale ako som si všimol, názory na ňu sa dosť líšia. Mimochodom, vedeli ste to? posledné zmeny v Mozilla Developer Network boli vytvorené pomocou Stylus? David Walsh, ktorý na projekte pracoval, tiež napísal o tom, ako začať so Stylusom.

Aké sú teda výhody Stylusu oproti Sass? Jednak je vyvinutý na báze Node.sj, čo je pre mňa osobne plus. A ako skvelé je môcť používať Sass v pracovnom postupe Node vďaka obalu Sass pre LibSass, to isté sa nedá povedať o LibSass napísanom v Node.

Okrem toho má Slylus mimoriadne tvárnu syntax, ktorá môže byť dobrá alebo zlá v závislosti od projektu, tímu a tendencie držať sa prísnych zásad kódovania. Myslím si, že tvárna syntax je v poriadku, pokiaľ do šablóny so štýlmi nezačnete „zapájať“ príliš veľa logiky a nevložíte kód skôr, ako to urobíte.

Vo všeobecnosti, Stylus a Sass podporujú pomerne veľa rovnakých funkcií; môžete si pozrieť úplný zoznam funkcií Stylusu, ale nečakajte nič prevratné (hoci existuje niekoľko pokročilých funkcií). Slylus tiež podporuje veľa syntaktických funkcií, hoci obrysy sú oveľa nejasnejšie ako v Sass: môžete písať v rôzne štýlyčokoľvek chcete (odsadené, v štýle CSS) a môžete miešať a spájať v rovnakom štýle (analýza na to musela byť zábava písať).

Tak čo si myslíte? Chcieť vyskúšať?

Začať

Ako už bolo uvedené, Slylus je napísaný v Node.js, takže ho môžeme nainštalovať ako ktorýkoľvek iný balík npm:

$ npm nainštalovať stylus -g

Odtiaľ ho môžete zapojiť do pracovného postupu Node s pomocou JavaScriptu API, alebo môžete použiť spustiteľný súbor príkazového riadku na generovanie štýlov. Kvôli jednoduchosti budeme používať nástroj príkazového riadka Stylus, ale môžete ho získať zo skriptu Node, Gulp alebo Grunt.

stylus ./stylesheets/ --out ./public/css

Predchádzajúci príkaz hovorí stylusu, aby zhromaždil všetky štýly stylusu (.styl) z priečinka so štýlmi a zhromaždil ich v priečinku public/css. Samozrejme, môžete sa tiež pozrieť do adresára, ak chcete vykonať zmeny:

stylus --watch ./stylesheets/ --out ./public/css

Štýly písania v Styluse

Ak ešte len začínate a nechcete sa zahlcovať novou syntaxou, môžete písať jednoduchý css v súbore .style. Keďže Stylus podporuje štandardnú syntax CSS, môžete začať s kódom CSS, len ho trochu zosilniť.

Základná syntax

Čo sa týka samotnej syntaxe, takmer všetko je voliteľné. Rovnátka: Načo sa obťažovať? dvojbodka: no tak! Čiarky: áno, kto ich potrebuje! Zátvorky: prosím. Nižšie je to perfektné správny kód Stylus:

Foo .bar farba paradajka pozadia deep sky blue

Na prvý pohľad druh porušenia, ale môžeme si na to zvyknúť, najmä ak sú k dispozícii syntaktické značky. Ako ste pravdepodobne uhádli, predchádzajúci kód sa skompiluje do:

Foo, .bar ( farba: paradajka; pozadie: deepskyblue; )

Premenné

Najčastejšie používanou vlastnosťou CSS preprocesorov je schopnosť definovať premenné. Nie je žiadnym prekvapením, že to ponúka aj Slylus. Hoci na rozdiel od Sass sú vyjadrené znakom rovnosti (=), a nie dvojbodkou (:). Tiež znak dolára ($) je voliteľný a možno ho bezpečne vynechať.

//Definujte premennú `text-font-stack` text-font-stack = "Helvetica", "Arial", sans-serif; // Použite ho ako súčasť vlastnosti `font` body font 125% / 1,5 text-font-stack

Teraz je tu niečo, čo Stylus robí, čo Sass alebo akýkoľvek iný preprocesor nie: vyhľadať hodnotu vlastnosti. Povedzme, že chcete použiť záporný ľavý okraj polovičnej šírky; v Sass musíte uložiť šírku do premennej, ale nie v Styluse:

Pri použití @width povieme stylusu, aby získal hodnotu šírky

vlastnosti aktuálneho bloku, pričom sa s ním zaobchádza ako s premennou. Celkom jednoduché! Ďalším zaujímavým prípadom použitia je výstup vlastnosti v závislosti od toho, či bola predtým definovaná:

Foo // ... iné štýly z-index: 1, pokiaľ nie je @z-index

V tomto prípade bude z-index 1, pokiaľ .foo ešte nemal nastavená hodnota pre vlastnosť z-index. V spojení s mixínmi (nečistotami) to bude silný ťah.

Zmesi (nečistoty)

Keď už o tom hovoríme, definujme „mixin“, pretože je to pravdepodobne jedna z najpopulárnejších funkcií Sass! Prímes dotykového pera nepotrebuje žiadne špecifické údaje kľúčové slovo; ide o prímes, ak má na konci svojho názvu zátvorky (prázdne alebo nie).

Veľkosť (šírka, výška = šírka) šírka šírka výška výška

Rovnako ako v prvom prípade, na zahrnutie mixinu nie je potrebná žiadna špeciálna syntax, ako napríklad @include alebo +:

veľkosť foo (100px)

Ak chcete, môžete dokonca vynechať zátvorky, v takom prípade je to, akoby ste plne používali štandardnú (ešte nie) vlastnosť CSS. Tento mechanizmus sa nazýva priehľadné nečistoty, pretože ich inklúzie sú neviditeľné.

veľkosť foo 100px

Na prvý pohľad sa to môže zdať ako zbytočný trik, no táto funkcia v skutočnosti umožňuje autorom rozšíriť štandardnú syntax CSS. Zvážte nasledujúci prepadový mix:

Overflow(value) if value == elipsa white-space nowrap overflow skrytý text-overflow elipsa else overflow: value

Ak daná hodnota je elipsa, vypíše známu deklaračnú trojicu potrebnú na to, aby jeden riadok pretekal elipsou. V opačnom prípade vypíše danú hodnotu. Tu je návod, ako ho budete používať:

Prepadová elipsa Foo

A toto dá:

Foo ( biele miesto: nowrap; pretečenie: skryté; pretečenie textu: elipsa; )

Musíte uznať, že je to celkom fajn trik. Aj keď to môže byť mätúce (a možno nebezpečné); môcť rozšíriť štandard vlastnosti css s ďalšími hodnotami je vlastne zaujímavý koncept.

Ak chcete do mixinu odovzdať nejaký obsah, v štýle @content je to pravdepodobne cez premennú (blok). Počas zahrnutia stačí pred názov mixu uviesť znak +, aby ste mu odovzdali ďalší obsah.

Has-js() html.js & (blok).foo +has-js() farba červená

Tento kód je zostavený tak, aby:

html.js .foo ( farba: #f00; )

Poslednou a veľmi zaujímavou vlastnosťou mixinov Stylus je, že vždy majú argumenty lokálnej premennej obsahujúce všetky argumenty (ak nejaké existujú), ktoré sú odovzdané mixinu, keď sú zahrnuté. S touto premennou možno manipulovať a zaobchádzať s ňou ako s poľom, napríklad na extrahovanie hodnoty pri konkrétnych indexoch pomocou kombinácie [..] ako v JavaScripte.

A na záver…

Skúmanie všetkých funkcií a syntaxových trikov zo Stylusu by bolo príliš dlhé a myslím si, že už sme urobili slušný úvod, dosť na to, aby sme mohli aspoň začať!

Ako vidíte, stylus je veľmi tvárny. Zo všetkých nástrojov, ktoré môžu pomôcť pri písaní CSS, je Stylus zďaleka jediný, ktorý približuje CSS k skutočnému programovaciemu jazyku.

Všimnite si, že Stylus má tiež svoju vlastnú infraštruktúru, rovnako ako Sass má Compass a volá sa Nib. Hrot sú nástroje, ktoré poskytujú dodatočných asistentov a podpora viacerých prehliadačov pre mixiny Stylus.

Niekomu sa to môže páčiť a niekomu nie. Aj keď moja rada je byť veľmi prísna so syntaxou. Práca s takouto tolerantnou syntaxou nemusí byť vždy šťastím. Tak či onak, je pekné vidieť nejakú zdravú konkurenciu zo strany Sass.

Dnes chcem hovoriť o tom, prečo a ako sme pri vývoji Yandex.Mail použili preprocesor Stylus, a tiež opísať metódu, ktorú používame na prácu so štýlmi pre IE. Je veľmi jednoduché implementovať pomocou preprocesorov a robí podporu IE jednoduchou a pohodlnou. Vyvinuli sme na to špeciálnu knižnicu, ktorú budeme aj zdieľať - if-ie.styl .

Toto je len prvý článok zo série článkov o používaní predprocesora Stylus v Yandex.Mail, ktoré pripravujeme na zverejnenie.

Ako sme sa dostali k používaniu preprocesorov

Hoci Yandex.Mail vyzerá ako jednostránková aplikácia, vo vnútri obsahuje obrovské množstvo všemožných blokov, ich modifikácií a kontextov, v ktorých sa tieto bloky a úpravy môžu objaviť.

Okrem toho má už viac ako tridsať námetov. Existujú témy so svetlým pozadím a s tmavým pozadím, existujú témy, ktoré sa líšia iba farbami, a sú také, v ktorých je takmer celé rozhranie ručne vyrezávané z plastelíny (http://habrahabr.ru/company/yandex /blog/110556/ ). Niektoré témy majú iba jeden obrázok na pozadí, zatiaľ čo iné môžu zmeniť pozadie náhodne alebo v závislosti od dennej doby a počasia.

Kvôli tomu všetkému existuje veľa variácií vizuálneho znázornenia rozhrania, čo vás núti zaobchádzať s procesom vývoja trochu inak a hľadať nástroje, ktoré sú vhodnejšie na riešenie problému.

Keď sme prvýkrát spustili rozhranie „neo2“, zvolili sme známe riešenie – šablónový engine Template Toolkit 2 s trochu neštandardným scenárom jeho použitia na generovanie CSS, nie HTML. Najprv sme potrebovali len premenné, no postupom času sa námety skomplikovali a nakoniec sa ukázalo, že takýto nástroj je nepohodlný. Ťažkopádna syntax, nedostatok funkcií špecifických pre CSS a všeobecný pocit z používania nástroja na iné účely viedli k hľadaniu iných možností. Uvedomili sme si, že bez preprocesora sa nezaobídeme.

Výber predprocesora

Vybrali sme si z troch možností: Sass, Less a Stylus. Proces bol celkom jednoduchý: vzali sme niekoľko existujúcich blokov a potom sme sa ich pokúsili zvrátiť pomocou každého z preprocesorov.

V Styluse je mnoho ďalších veľmi užitočných vecí, ale rozhodli sme sa preň práve vyššie uvedené.

Stylus má samozrejme okrem výhod aj nevýhody. A tou hlavnou je flexibilná syntax – tú považujú autori preprocesora za hlavnú výhodu. V snahe o flexibilitu plne implementovali iba syntax založenú na odsadzovaní, zatiaľ čo možnosť „a la CSS“ je akosi priskrutkovaná a nemôžete len vziať a premenovať .css na .styl – nie všetky hláskovanie CSS bude fungovať a v štýloch. Ale rozhodli sme sa, že schopnosti, ktoré nám tento preprocesor poskytuje, neznamenajú jeho nevýhody, takže sme sa museli zmieriť s určitou vrtošivosťou analyzátora (a začať používať syntax založenú na odsadzovaní).

Keď zhrnieme príbeh o výbere, stojí za zmienku, že Sass a Stylus sú dve takmer rovnocenné možnosti. Každý z nich má svoje výhody a jedinečné vlastnosti, ako aj nevýhody. Ak už používate jeden z týchto preprocesorov a všetko vám vyhovuje - skvelé, nemôžete myslieť na hľadanie nového. Ak sa však k voľbe len blížite, alebo je preprocesor, ktorý používate, príliš tesný, skúste porovnať všetky možnosti. Najlepšia cesta urobiť to znamená vyskúšať na každom preprocesore svoju úlohu. Po rozložení časti vášho projektu na každý z preprocesorov pochopíte, ktoré z ich funkcií sú pre vás dôležité a ktoré nie. Len nezabudnite, že preprocesor nie je len iná syntax, ale aj iný prístup: s takýmto prepísaním môžete zároveň prerobiť kód a urobiť niečo optimálnejšie, ako to bolo s jednoduchým CSS.

Musíme vám však povedať ešte o jednej funkcii, ktorá sa nám v rámci témy Yandex.Mail ukázala ako veľmi užitočná. Toto je funkcia rgba-ie. V skutočnosti by sa táto funkcia mohla volať len rgba , ale v Styluse je chyba: funkcie definované v JS nemožno prepísať rovnakým spôsobom ako tie, ktoré sú definované v Styluse, takže som tu musel vytvoriť novú.

Čo ona robí? Staršie IE nepodporujú nastavené hodnoty farieb formát rgba. Preto zvyčajne vývojári buď predpíšu zodpovedajúce farby dvakrát - najprv pre starý IE v obvyklom hex formáte a potom pre všetky normálne prehliadače v požadovanom rgba - alebo použijú modernizr a použijú ho a triedu .rgba na nastavenie vhodných farieb tam, kde je to potrebné. . Ale pre fallbacky v IE, zakaždým musíte vypočítať približnú farbu toho, na čo v ňom degradujeme. Najčastejšie to tak bude požadovanú farbu, prekrývajúce pozadie stránky alebo stredné pozadie prvku, na ktorý sa použije farba v rgba.

Funkcia rgba-ie z if-ie.styl túto úlohu výrazne zjednodušuje: duplikovaním možností bežnej funkcie rgba získame ešte jeden voliteľný parameter, ktorý je možné funkcii odovzdať – farbu pozadia pre záložnú funkciu. Predvolene je tento parameter nastavený na #FFF .

Jednoduchý príklad:

Farba foo: rgba-ie (0,0,0,0,5)

V bežných prehliadačoch bude táto farba zvyčajná rgba(0,0,0,0,5) , ale v IE sa zmení na #808080 - teda zodpovedajúcu farbu prekrývajúcu bielu.

Viac komplexný príklad, s cieľovým pozadím ako posledným argumentom (a pomocou jednej z funkcií dotykového pera – možnosť zadať namiesto tri číslice farba r , g a b v hexadecimálnom tvare):

Foo background: rgba-ie(#FFDE00, .42, #19C261)

V tomto príklade pre bežné prehliadače farba bude rgba(255,222,0,0,42) , ale IE dostane správnu #7ace38 .

Zároveň je možné nastaviť predvolený návrat pomocou premennej $default_rgba_fallback.

V dôsledku toho si môžete výrazne zjednodušiť život, ak namiesto bežného rgba použijete funkciu rgba-ie – v tomto prípade môžete na IE takmer zabudnúť.

Značky:

Pridať značky