Proces písania HTML a CSS môže byť trochu vyčerpávajúci a vyžaduje veľa rovnakých úloh znova a znova. Úlohy ako zatváranie značiek v HTML alebo monotónne prezeranie hexadecimálnych hodnôt farieb v CSS.
Takéto rôzne úlohy, spravidla malé, mierne znižujú účinnosť. Našťastie tieto a niekoľko ďalších neefektívnych úloh rozpoznali a spochybnili preprocesory.
Preprocesor je program, ktorý berie jeden dátový typ a konvertuje ho na iný dátový typ. V prípade HTML a CSS sú niektoré z najpopulárnejších jazykov preprocesora Haml a Sass. Haml je konvertovaný do HTML a Sass je konvertovaný do CSS.
Od svojho vzniku Haml a Sass pri riešení niektorých najbežnejších problémov našli mnohé dodatočné spôsoby rozšíriť možnosti HTML a CSS. Nielen odstránením neefektívnych úloh, ale aj vytvorením metód, ktoré uľahčia a zlogizujú vývoj stránok. Popularitu preprocesorov priniesli aj rôzne rámce, ktoré ich podporujú; jedným z najpopulárnejších je kompas.
Haml
CodeKit podporuje aj ďalšie preprocesory, ktoré by sa vám tiež mohli hodiť.
doctype
Prvou časťou písania Hamlovho dokumentu je vedieť, aký typ dokumentu použiť. Pri práci s dokumentmi HTML bude primárnym typom dokumentu HTML5. V Hamlovi sú typy dokumentov definované tromi výkričníky(!!!), potom príde v prípade potreby niečo konkrétne.
Predvolený doctype v Haml je HTML 1.0 Transitional. Aby sa to teda podobalo HTML5, za výkričníkmi (!!! 5) musíte prejsť číslom päť.
Hotové HTML
Vyhlásenie prvku
Jednou z definujúcich vlastností Hamla je jeho syntax a spôsob deklarovania a vnorenia. Elementy HTML zvyčajne obsahujú počiatočné a koncové značky, ale prvky Haml majú iba jednu počiatočnú značku. Prvky začínajú znakom percenta (%) a potom odsadenie určuje vnorenie. Odsadenie v Haml môže byť vykonané s jednou alebo viacerými medzerami, ale je dôležité, aby odsadenie zostalo rovnaké. Tabulátory a medzery nemožno navzájom kombinovať a rovnaký počet tabulátorov alebo medzier musí byť rovnaký v celom dokumente.
Eliminácia potreby začiatočných a koncových značiek a povinná odsadená štruktúra vytvára prehľad, ktorý sa dá ľahko sledovať. Značku je možné kedykoľvek prelistovať a bez problémov zmeniť.
%body %header %h1 Ahoj svet! %section %p Lorem ipsum dolor sit amet.
Kompilovaný HTML
Ahoj svet!
Lorem ipsum dolor sit amet.
Spracovanie textu
Text v Haml môže byť umiestnený na rovnakom riadku ako deklarovaný prvok alebo odsadený pod prvkom. Text nemôže byť na rovnakom riadku ako deklarovaný prvok a zároveň vnorený pod ním; musí byť jedno alebo druhé. Vyššie uvedený príklad možno prepísať takto:
%body %header %h1 Ahoj svet! %section %p Lorem ipsum dolor sit amet.
Atribúty
Atribúty, podobne ako prvky, sú v Hamlovi deklarované mierne odlišne. Atribúty sa deklarujú priamo za prvkom, v zložených alebo v zátvorkách, v závislosti od toho, či chcete použiť syntax Ruby alebo HTML. Atribúty v štýle Ruby budú používať štandardnú syntax hash vo vnútri (), zatiaľ čo atribúty štýlu HTML budú používať štandardnú syntax HTML vo vnútri ().
%img(:src => "shay.jpg", :alt => "Shay Hou") %img(src: "shay.jpg", alt: "Shay Hou") %img(src="shay.jpg" alt="Shay Howe") !}
Kompilovaný HTML
Triedy a identifikátory
V prípade potreby môžu byť triedy a identifikátory deklarované ako ostatné atribúty, ale môže sa s nimi zaobchádzať aj inak. Namiesto uvádzania atribútov class a id s ich hodnotami v zátvorkách je možné hodnotu definovať priamo za prvkom. Pomocou bodky pre triedy alebo hash pre identifikátor možno hodnotu pridať hneď za prvok.
Okrem toho môžu byť atribúty zmiešané dohromady spojením vo vhodnom formáte. Triedy musia byť oddelené bodkami a ďalšie atribúty možno pridať pomocou jedného z vyššie uvedených formátov.
%section.feature %section.feature.special %section#hello %section#hello.feature(role="region")
Kompilovaný HTML
Triedy a identifikátory v V prípade, že sa trieda alebo identifikátor používa v
, potom môže byť %div vynechaný a hodnota triedy alebo id môže byť zahrnutá priamo. Opäť platí, že triedy by mali byť definované bodkou a identifikátory znakom libry.Úžasná .úžasná.lekcia #začíname.lekcia
Kompilovaný HTML
Booleovské atribúty
S boolovskými atribútmi sa zaobchádza rovnako, ako keby boli v Ruby alebo HTML, v závislosti od použitej syntaxe.
%input(:type => "checkbox", :checked => true)
Kompilovaný HTML
Unikajúci text
Jednou z výhod Hamla je schopnosť počítať a spúšťať Ruby, nie je to však vždy želaná akcia. Text a riadky kódu môžu byť ukončené spätnou lomkou (\), ktorá umožňuje explicitné zobrazenie textu bez toho, aby sa spustil.
V nižšie uvedenom príklade prvý vzor = @author vykoná Ruby a získa meno autora z aplikácie. Druhý vzor sa začína opačnou lomkou, aby unikol text, a vytlačí sa tak, ako je, bez vykonania.
Autor = @autor \= @autor
Kompilovaný HTML
Alternatívy s únikom textu
Niekedy escapovanie textu nestačí a na vygenerovanie požadovaného výstupu je potrebný Ruby. Jedným z populárnych príkladov je pokus vložiť bodku hneď za odkaz, ale nie ako súčasť textu odkazu. Umiestnenie bodu na Nový riadok nie je prijateľné, pretože by sa považovalo za prázdnu hodnotu triedy, čo by spôsobilo chybu pri kompilácii. Pridaním obrátenej lomky pred bodku znak uniknete, ale medzi posledné slovo a bodku vložíte medzeru. Opäť neprináša požadovaný výsledok.
V týchto prípadoch príde vhod pomocník Ruby. V nižšie uvedenom príklade sa pomocník používa na umiestnenie bodky bezprostredne za posledné slovo, ale mimo textu odkazu.
%p Shay - = úspech "." do %a(:href => "#") dobre urobené
Kompilovaný HTML
Shay - Výborne.
Komentáre
Podobne ako prvky a atribúty, aj komentáre sú v Hamlovi spracované mierne odlišne. Kód je možné okomentovať jednoducho pomocou jednej lomky (/). Jednotlivé riadky môžu byť zakomentované lomkou na začiatku riadku a bloky kódu môžu byť zakomentované vložením pod lomku.
%div / riadok s komentárom Skutočný riadok / %div Blok s komentárom
Kompilovaný HTML
Aktuálna linka
Podmienené komentáre
V Hamlovi sa inak riešia aj podmienené pripomienky. Ak chcete vytvoriť podmienený komentár, použite hranaté zátvorky () okolo podmienky. Tieto hranaté zátvorky musia byť umiestnené priamo za lomkou.
/ %script(:src => "html5shiv.js")
Kompilovaný HTML
Tiché komentáre
Haml tiež poskytuje možnosť vytvárať špeciálne tiché komentáre. Tiché komentáre sa líšia od základných HTML komentárov tým, že po kompilácii je akýkoľvek obsah v tichom komentári z danej stránky úplne odstránený a neobjaví sa vo výsledkoch. Tiché komentáre začínajú spojovníkom, za ktorým nasleduje znak libry (-#). Rovnako ako pri iných komentároch, tiché komentáre možno použiť na odstránenie jedného alebo viacerých riadkov pomocou vnorenia.
%div-# Vymazaný riadok Aktuálna linka
Kompilovaný HTML
Aktuálna linka
Filtre
Haml ponúka niekoľko filtrov, ktoré vám umožňujú používať rôzne typy vstupov vo vnútri Hamla. Filtre začínajú dvojbodkou, za ktorou nasleduje názov filtra, napr. :markdown , s akýmkoľvek obsahom na filtrovanie prílohy pod ním.
Bežné filtre
Nižšie sú uvedené niektoré bežné filtre vrátane najpopulárnejšej skupiny: css a: javascript.
- :cdata
- :káva
- :ušiel
- :javascript
- :menej
- :markdown
- :maruku
- :prostý
- :zachovať
- :rubín
- :sass
- :scss
- :textil
Javascriptový filter
:javascript $("tlačidlo").on("kliknutie", funkcia(udalosť) ( $("p").hide("pomaly"); ));
Kompilovaný HTML
CSS filtre a Sass
:css .container ( margin: 0 auto; width: 960px; ) :sass .container margin: 0 auto width: 960px
Kompilovaný HTML
Rubínová interpolácia
Ako už bolo spomenuté, Haml dokáže vyhodnotiť Ruby a niekedy môžu nastať prípady, keď treba Ruby vyhodnotiť v obyčajnom texte. V tomto prípade musí byť Ruby interpolovaný zabalením potrebného kódu Ruby.
Nižšie je uvedený príklad v Ruby, ktorý je interpolovaný ako súčasť názvu triedy.
%div(:class => "student-#(@student.name)")
Kompilovaný HTML
SCSS a Sass
SCSS a Sass sú jazyky na predbežné spracovanie, ktoré sa kompilujú do CSS. Sú trochu ako Haml a uľahčujú písanie kódu s veľmi malým pákovým efektom. Jednotlivo majú SCSS a Sass rovnaký pôvod, ale technicky majú odlišnú syntax.
Kvôli stručnosti boli Haml a Sass jedinými predprocesormi, na ktoré sa tento návod vzťahuje. Boli vybrané aj preto, že sú postavené s Ruby a zapadajú priamo do Ruby on Rails aplikácií. Obrovskú podporu dostali aj od komunity.
Pokiaľ ide o výber preprocesora, ktorý chcete použiť, je dôležité zvážiť, čo je najlepšie pre váš tím a projekt. Projekty postavené v Node.js môžu pravdepodobne viac ťažiť z Jade a Stylus. Najdôležitejším aspektom, ktorý treba zvážiť, je však to, na čo je váš tím zvyknutý. Vykonajte prieskum pre každý projekt a vyberte si najvhodnejšie riešenie.
Zdroje a odkazy
- Haml - HTML Abstraction Markup Language
- Sass – Syntakticky úžasné štýly
- Sass ihrisko na SassMeister
26.07.2017
5 najlepších predprocesorov CSS roku 2017 na zrýchlenie vášho pracovného toku.
CSS preprocesory sú špeciálne navrhnuté tak, aby prácu programátorov CSS urobili zábavnejšou. Umožňujú vám písať ľahko upraviteľný a spoľahlivý kód s možnosťou opätovného použitia.
Inými slovami, CSS preprocesor je doplnkom CSS s novými funkciami: premenné, rozšírenia, importy atď.
V tomto článku budem hovoriť o 5 najlepších preprocesoroch CSS v roku 2017.
01. Sass
SASS je najpopulárnejší preprocesor s obrovskou komunitou a výkonnými funkciami. Funguje to len v spojení s Ruby a dá sa veľmi ľahko naučiť. Väčšina front-end frameworkov ako Bootstrap, Foundation a materialize je postavená pomocou SASS.
SASS má dve syntaxe:
- .sass
- .scss
02. Stylus
Stylus je ďalší skvelý preprocesor na dynamické generovanie CSS. Ak chcete vynechať zložené zátvorky, čiarky a bodkočiarky, môže to byť pre vás. najlepšia voľba. Stylus využíva technológiu Node.js a jeho inštalácia a používanie je veľmi jednoduché. Má veľa vlastných funkcií, ako napríklad saturation(). Môžete tiež použiť všetky funkcie poskytované inými poprednými kompilátormi.
03.Menej
Less, tiež známy ako Less.js alebo Less CSS, je ďalším popredným preprocesorom CSS. Toto je skvelá voľba, ak potrebujete štandardné funkcie ako premenné, vnorené štýly atď. Táto knižnica Javascript bola pôvodne napísaná v Ruby.
- Prečítajte si tiež:
04 Stylecow
Stylecow je preprocesor napísaný v Node, ktorý je možné nainštalovať pomocou npm. Má výkonné API, pomocou ktorého môžete jednoducho vytvárať pluginy.
05. CSS Crush
Preprocesor postavený v PHP, ktorý sa stane skvelá možnosť pre PHP programátorov, pretože funguje na mnohých platformách. CSS-Crush má všetky obvyklé funkcie preprocesora (premenné, vnorené štýly atď.)
Záver
Ak hľadáte najlepšie css preprocesora, nájdete veľkú rozmanitosť rôzne možnosti online. podla mna najlepšie možnosti pre začiatočníkov sú to SASS a Stylus.
Máte otázky?
Implementácia dizajnového rozloženia nie je možná bez použitia HTML a CSS. Ak nám značkovací jazyk umožňuje načrtnúť šablónu z potrebné prvky, potom CSS transformuje túto šablónu na správny druh, ako v zdroji. Zdalo by sa, že pomocou čistého CSS spravíte stránku tak, ako ju chce zákazník vidieť.
Ak však niekto otvorí váš jediný súbor CSS a pokúsi sa niečo vyladiť, ste si istý, že kód bude čitateľný, upraviteľný, štruktúrovaný a zrozumiteľný? Ak je váš projekt obrovský, s mnohými časťami, ste si istý, že ho v budúcnosti ľahko udržíte? Ak používate CSS preprocesor, odpoveď je áno, okrem toho je to spôsob, ako automatizovať rozloženie stránok. prečo? Teraz to zistíme.
Čo je preprocesor CSS?
Podľa môjho názoru ide o doplnok k štandardnému CSS, ktorý rozširuje štandardné funkcie, pridáva niektoré funkcie a umožňuje písať čitateľnejší a zrozumiteľnejší kód. Pri východe zdroj kompiluje do nášho bežného CSS. Využitie takéhoto nástroja v modernom vývoji je „must have“ a odporúčam každému dizajnérovi layoutu alebo vývojárovi, aby sa s ním zoznámil. Treba dodať, že je z čoho vyberať, pretože CSS preprocesorov je pomerne dosť, no treba vyzdvihnúť tie najpopulárnejšie:
- stylus
Všetky vyššie uvedené preprocesory majú takmer identickú funkcionalitu, len nepatrné rozdiely sú v syntaxi. Teraz späť k otázke vznesenej skôr: aké výhody nám poskytujú preprocesory, aby bol náš kód pohodlnejší a udržiavateľný? Toto je v prvom rade hniezdenie. Táto funkcia nám dáva možnosť štruktúrovať prvky, ľahko nájsť rodiča prvku, rýchlo písať pseudotriedy a pseudoprvky a dokonca používať BEM! Napr.:
.track
farba: #fff
&__title
výplň: 10px
&:vznášať sa, &:zamerať
farba: modrá
Pozrite sa na tento útržok kódu napísaný v Sass. To všetko sa premieta do nasledujúceho CSS:
Skladba (farba: #FFF;)
.track_title (odsadenie: 10px;)
.track__title:hover, .track-title:focus ( farba: modrá)
Stručné, pohodlné, zrozumiteľné, štruktúra od rodiča k dieťaťu je skvelá, nie? Druhou, a nemenej dôležitou výhodou sú premenné. Princíp ich fungovania je mimoriadne jednoduchý: názov premennej začína symbolom $ a potom samotný názov. Hodnotu píšeme cez dvojbodku – môže to byť farba v akejkoľvek vhodnej forme, hodnoty odsadenia, šírka, veľkosť písma atď. V dôsledku toho dostaneme niečo takéto:
$btn-color: modrá;
$font-main-size: 16px;
A použitie by vyzeralo takto:
Blokovať (
font-size: $font-main-size;
}
Len si predstavte, aké je to pohodlné. Ak potrebujete zmeniť farbu tlačidiel na celom webe, musíte to urobiť iba na jednom mieste! No poďme ďalej. Tretia a najväčšia vec, ktorú nám CSS preprocesory môžu ponúknuť, je použitie mixinov. V našom bežnom chápaní sú mixiny funkcie, ktoré možno použiť niekoľkokrát bez opakovania rovnakých častí kódu (pamätajte na jeden z princípov programovania – DRY – Don’t repeat yourself). Aby som bol úprimný, mixiny nepoužívam tak často, zrejme tam nebola taká naliehavá potreba, ale aj tak ukážem pár príkladov. Jedna z mojich najpoužívanejších funkcií vyzerá takto:
@function em($pixelov, $kontext: $kontext-prehliadača) (
@if (bez jednotiek ($pixelov)) (
$pixelov: $pixelov * 1px;
}
@if (bez jednotiek($context)) (
$kontext: $kontext * 1px;
}
@return $pixelov / $kontext * 1em;
}
A jeho aplikácia je nasledovná:
telo (
font-size: em(14px);
}
Áno, ako ste pochopili, je to len prevod veľkosti písma z PX na Em (nech žijú časy, keď ste na takúto maličkosť používali špeciálne služby alebo ste sa počítali na kalkulačke). Nasledujúci príklad tiež ušetrí veľa času:
@mixin input-placeholder(
&.placeholder ( @content; )
&:-moz-placeholder ( @content; )
&::-moz-placeholder ( @content; )
&:-ms-input-placeholder ( @content; )
&::-webkit-input-placeholder ( @content; )
}
Jeho použitie:
vstup, textová oblasť (
@include input-placeholder (
farba: $šedá;
}
}
Existuje mnoho ďalších príkladov, ale stojí za to začať používať mixiny sami, aby ste pochopili, aký užitočný je tento nástroj. Možno existuje ešte jeden dôvod, pre ktorý si zamilujete predprocesory CSS, a jeho názov je modularita. Je rok 2018 a všade máme modularitu – od nástrojov HTML šablón až po rôzne css frameworky a tvorcov projektov.
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 ich však vytvoriť efektívnejším spôsobom a nechať si ich odtiaľ požičať štandardným vlastnostiam (napríklad animáciám CSS).
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
zebra
zebra
zebra
zebra
zebra
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ácu sa oplatí preštudovať, ak potrebujete skrátiť čas strávený vývojom animácií. používateľské rozhranie, napríklad na vytvorenie trobera. 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().
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.
Načítava...
V prípade, že sa trieda alebo identifikátor používa v
Úžasná .úžasná.lekcia #začíname.lekcia
Kompilovaný HTML
Booleovské atribúty
S boolovskými atribútmi sa zaobchádza rovnako, ako keby boli v Ruby alebo HTML, v závislosti od použitej syntaxe.
%input(:type => "checkbox", :checked => true)
Kompilovaný HTML
Unikajúci text
Jednou z výhod Hamla je schopnosť počítať a spúšťať Ruby, nie je to však vždy želaná akcia. Text a riadky kódu môžu byť ukončené spätnou lomkou (\), ktorá umožňuje explicitné zobrazenie textu bez toho, aby sa spustil.
V nižšie uvedenom príklade prvý vzor = @author vykoná Ruby a získa meno autora z aplikácie. Druhý vzor sa začína opačnou lomkou, aby unikol text, a vytlačí sa tak, ako je, bez vykonania.
Autor = @autor \= @autor
Kompilovaný HTML
Alternatívy s únikom textu
Niekedy escapovanie textu nestačí a na vygenerovanie požadovaného výstupu je potrebný Ruby. Jedným z populárnych príkladov je pokus vložiť bodku hneď za odkaz, ale nie ako súčasť textu odkazu. Umiestnenie bodu na Nový riadok nie je prijateľné, pretože by sa považovalo za prázdnu hodnotu triedy, čo by spôsobilo chybu pri kompilácii. Pridaním obrátenej lomky pred bodku znak uniknete, ale medzi posledné slovo a bodku vložíte medzeru. Opäť neprináša požadovaný výsledok.
V týchto prípadoch príde vhod pomocník Ruby. V nižšie uvedenom príklade sa pomocník používa na umiestnenie bodky bezprostredne za posledné slovo, ale mimo textu odkazu.
%p Shay - = úspech "." do %a(:href => "#") dobre urobené
Kompilovaný HTML
Shay - Výborne.
Komentáre
Podobne ako prvky a atribúty, aj komentáre sú v Hamlovi spracované mierne odlišne. Kód je možné okomentovať jednoducho pomocou jednej lomky (/). Jednotlivé riadky môžu byť zakomentované lomkou na začiatku riadku a bloky kódu môžu byť zakomentované vložením pod lomku.
%div / riadok s komentárom Skutočný riadok / %div Blok s komentárom
Kompilovaný HTML
Podmienené komentáre
V Hamlovi sa inak riešia aj podmienené pripomienky. Ak chcete vytvoriť podmienený komentár, použite hranaté zátvorky () okolo podmienky. Tieto hranaté zátvorky musia byť umiestnené priamo za lomkou.
/ %script(:src => "html5shiv.js")
Kompilovaný HTML
Tiché komentáre
Haml tiež poskytuje možnosť vytvárať špeciálne tiché komentáre. Tiché komentáre sa líšia od základných HTML komentárov tým, že po kompilácii je akýkoľvek obsah v tichom komentári z danej stránky úplne odstránený a neobjaví sa vo výsledkoch. Tiché komentáre začínajú spojovníkom, za ktorým nasleduje znak libry (-#). Rovnako ako pri iných komentároch, tiché komentáre možno použiť na odstránenie jedného alebo viacerých riadkov pomocou vnorenia.
%div-# Vymazaný riadok Aktuálna linka
Kompilovaný HTML
Filtre
Haml ponúka niekoľko filtrov, ktoré vám umožňujú používať rôzne typy vstupov vo vnútri Hamla. Filtre začínajú dvojbodkou, za ktorou nasleduje názov filtra, napr. :markdown , s akýmkoľvek obsahom na filtrovanie prílohy pod ním.
Bežné filtre
Nižšie sú uvedené niektoré bežné filtre vrátane najpopulárnejšej skupiny: css a: javascript.
- :cdata
- :káva
- :ušiel
- :javascript
- :menej
- :markdown
- :maruku
- :prostý
- :zachovať
- :rubín
- :sass
- :scss
- :textil
Javascriptový filter
:javascript $("tlačidlo").on("kliknutie", funkcia(udalosť) ( $("p").hide("pomaly"); ));
Kompilovaný HTML
CSS filtre a Sass
:css .container ( margin: 0 auto; width: 960px; ) :sass .container margin: 0 auto width: 960px
Kompilovaný HTML
Rubínová interpolácia
Ako už bolo spomenuté, Haml dokáže vyhodnotiť Ruby a niekedy môžu nastať prípady, keď treba Ruby vyhodnotiť v obyčajnom texte. V tomto prípade musí byť Ruby interpolovaný zabalením potrebného kódu Ruby.
Nižšie je uvedený príklad v Ruby, ktorý je interpolovaný ako súčasť názvu triedy.
%div(:class => "student-#(@student.name)")
Kompilovaný HTML
SCSS a Sass
SCSS a Sass sú jazyky na predbežné spracovanie, ktoré sa kompilujú do CSS. Sú trochu ako Haml a uľahčujú písanie kódu s veľmi malým pákovým efektom. Jednotlivo majú SCSS a Sass rovnaký pôvod, ale technicky majú odlišnú syntax.
Kvôli stručnosti boli Haml a Sass jedinými predprocesormi, na ktoré sa tento návod vzťahuje. Boli vybrané aj preto, že sú postavené s Ruby a zapadajú priamo do Ruby on Rails aplikácií. Obrovskú podporu dostali aj od komunity.
Pokiaľ ide o výber preprocesora, ktorý chcete použiť, je dôležité zvážiť, čo je najlepšie pre váš tím a projekt. Projekty postavené v Node.js môžu pravdepodobne viac ťažiť z Jade a Stylus. Najdôležitejším aspektom, ktorý treba zvážiť, je však to, na čo je váš tím zvyknutý. Vykonajte prieskum pre každý projekt a vyberte si najvhodnejšie riešenie.
Zdroje a odkazy
- Haml - HTML Abstraction Markup Language
- Sass – Syntakticky úžasné štýly
- Sass ihrisko na SassMeister
26.07.2017
5 najlepších predprocesorov CSS roku 2017 na zrýchlenie vášho pracovného toku.
CSS preprocesory sú špeciálne navrhnuté tak, aby prácu programátorov CSS urobili zábavnejšou. Umožňujú vám písať ľahko upraviteľný a spoľahlivý kód s možnosťou opätovného použitia.
Inými slovami, CSS preprocesor je doplnkom CSS s novými funkciami: premenné, rozšírenia, importy atď.
V tomto článku budem hovoriť o 5 najlepších preprocesoroch CSS v roku 2017.
01. Sass
SASS je najpopulárnejší preprocesor s obrovskou komunitou a výkonnými funkciami. Funguje to len v spojení s Ruby a dá sa veľmi ľahko naučiť. Väčšina front-end frameworkov ako Bootstrap, Foundation a materialize je postavená pomocou SASS.
SASS má dve syntaxe:
- .sass
- .scss
02. Stylus
Stylus je ďalší skvelý preprocesor na dynamické generovanie CSS. Ak chcete vynechať zložené zátvorky, čiarky a bodkočiarky, môže to byť pre vás. najlepšia voľba. Stylus využíva technológiu Node.js a jeho inštalácia a používanie je veľmi jednoduché. Má veľa vlastných funkcií, ako napríklad saturation(). Môžete tiež použiť všetky funkcie poskytované inými poprednými kompilátormi.
03.Menej
Less, tiež známy ako Less.js alebo Less CSS, je ďalším popredným preprocesorom CSS. Toto je skvelá voľba, ak potrebujete štandardné funkcie ako premenné, vnorené štýly atď. Táto knižnica Javascript bola pôvodne napísaná v Ruby.
- Prečítajte si tiež:
04 Stylecow
Stylecow je preprocesor napísaný v Node, ktorý je možné nainštalovať pomocou npm. Má výkonné API, pomocou ktorého môžete jednoducho vytvárať pluginy.
05. CSS Crush
Preprocesor postavený v PHP, ktorý sa stane skvelá možnosť pre PHP programátorov, pretože funguje na mnohých platformách. CSS-Crush má všetky obvyklé funkcie preprocesora (premenné, vnorené štýly atď.)
Záver
Ak hľadáte najlepšie css preprocesora, nájdete veľkú rozmanitosť rôzne možnosti online. podla mna najlepšie možnosti pre začiatočníkov sú to SASS a Stylus.
Máte otázky?
Implementácia dizajnového rozloženia nie je možná bez použitia HTML a CSS. Ak nám značkovací jazyk umožňuje načrtnúť šablónu z potrebné prvky, potom CSS transformuje túto šablónu na správny druh, ako v zdroji. Zdalo by sa, že pomocou čistého CSS spravíte stránku tak, ako ju chce zákazník vidieť.
Ak však niekto otvorí váš jediný súbor CSS a pokúsi sa niečo vyladiť, ste si istý, že kód bude čitateľný, upraviteľný, štruktúrovaný a zrozumiteľný? Ak je váš projekt obrovský, s mnohými časťami, ste si istý, že ho v budúcnosti ľahko udržíte? Ak používate CSS preprocesor, odpoveď je áno, okrem toho je to spôsob, ako automatizovať rozloženie stránok. prečo? Teraz to zistíme.
Čo je preprocesor CSS?
Podľa môjho názoru ide o doplnok k štandardnému CSS, ktorý rozširuje štandardné funkcie, pridáva niektoré funkcie a umožňuje písať čitateľnejší a zrozumiteľnejší kód. Pri východe zdroj kompiluje do nášho bežného CSS. Využitie takéhoto nástroja v modernom vývoji je „must have“ a odporúčam každému dizajnérovi layoutu alebo vývojárovi, aby sa s ním zoznámil. Treba dodať, že je z čoho vyberať, pretože CSS preprocesorov je pomerne dosť, no treba vyzdvihnúť tie najpopulárnejšie:
- stylus
Všetky vyššie uvedené preprocesory majú takmer identickú funkcionalitu, len nepatrné rozdiely sú v syntaxi. Teraz späť k otázke vznesenej skôr: aké výhody nám poskytujú preprocesory, aby bol náš kód pohodlnejší a udržiavateľný? Toto je v prvom rade hniezdenie. Táto funkcia nám dáva možnosť štruktúrovať prvky, ľahko nájsť rodiča prvku, rýchlo písať pseudotriedy a pseudoprvky a dokonca používať BEM! Napr.:
.track
farba: #fff
&__title
výplň: 10px
&:vznášať sa, &:zamerať
farba: modrá
Pozrite sa na tento útržok kódu napísaný v Sass. To všetko sa premieta do nasledujúceho CSS:
Skladba (farba: #FFF;)
.track_title (odsadenie: 10px;)
.track__title:hover, .track-title:focus ( farba: modrá)
Stručné, pohodlné, zrozumiteľné, štruktúra od rodiča k dieťaťu je skvelá, nie? Druhou, a nemenej dôležitou výhodou sú premenné. Princíp ich fungovania je mimoriadne jednoduchý: názov premennej začína symbolom $ a potom samotný názov. Hodnotu píšeme cez dvojbodku – môže to byť farba v akejkoľvek vhodnej forme, hodnoty odsadenia, šírka, veľkosť písma atď. V dôsledku toho dostaneme niečo takéto:
$btn-color: modrá;
$font-main-size: 16px;
A použitie by vyzeralo takto:
Blokovať (
font-size: $font-main-size;
}
Len si predstavte, aké je to pohodlné. Ak potrebujete zmeniť farbu tlačidiel na celom webe, musíte to urobiť iba na jednom mieste! No poďme ďalej. Tretia a najväčšia vec, ktorú nám CSS preprocesory môžu ponúknuť, je použitie mixinov. V našom bežnom chápaní sú mixiny funkcie, ktoré možno použiť niekoľkokrát bez opakovania rovnakých častí kódu (pamätajte na jeden z princípov programovania – DRY – Don’t repeat yourself). Aby som bol úprimný, mixiny nepoužívam tak často, zrejme tam nebola taká naliehavá potreba, ale aj tak ukážem pár príkladov. Jedna z mojich najpoužívanejších funkcií vyzerá takto:
@function em($pixelov, $kontext: $kontext-prehliadača) (
@if (bez jednotiek ($pixelov)) (
$pixelov: $pixelov * 1px;
}
@if (bez jednotiek($context)) (
$kontext: $kontext * 1px;
}
@return $pixelov / $kontext * 1em;
}
A jeho aplikácia je nasledovná:
telo (
font-size: em(14px);
}
Áno, ako ste pochopili, je to len prevod veľkosti písma z PX na Em (nech žijú časy, keď ste na takúto maličkosť používali špeciálne služby alebo ste sa počítali na kalkulačke). Nasledujúci príklad tiež ušetrí veľa času:
@mixin input-placeholder(
&.placeholder ( @content; )
&:-moz-placeholder ( @content; )
&::-moz-placeholder ( @content; )
&:-ms-input-placeholder ( @content; )
&::-webkit-input-placeholder ( @content; )
}
Jeho použitie:
vstup, textová oblasť (
@include input-placeholder (
farba: $šedá;
}
}
Existuje mnoho ďalších príkladov, ale stojí za to začať používať mixiny sami, aby ste pochopili, aký užitočný je tento nástroj. Možno existuje ešte jeden dôvod, pre ktorý si zamilujete predprocesory CSS, a jeho názov je modularita. Je rok 2018 a všade máme modularitu – od nástrojov HTML šablón až po rôzne css frameworky a tvorcov projektov.
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 ich však vytvoriť efektívnejším spôsobom a nechať si ich odtiaľ požičať štandardným vlastnostiam (napríklad animáciám CSS).
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.
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.
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ácu sa oplatí preštudovať, ak potrebujete skrátiť čas strávený vývojom animácií. používateľské rozhranie, napríklad na vytvorenie trobera. 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().
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.
Načítava...