Enostavno in enostavno vodilo za razumevanje Sass
Pred časom je Thoriq Firdaus napisal odličen članek o tem, kako začeti s Sassom, ki vam je pokazal, kako namestiti in uporabljati ta zelo uporaben jezik predprocesorja CSS (morda ga boste želeli preveriti, veste, za začetek).
V tem članku sem mislil, da vam bom dal malo več vpogleda v to, kaj lahko storite s Sassom in kako ga razvijalci uporabljajo vsak dan, da ustvarijo boljšo in bolj modularno kodo CSS. Pojdite naprej do želenega razdelka:
- Orodja trgovine
- Spremenljivke
- Gnezdenje
- Razširitev nabor pravil
- Mixins
- Placeholder Selectors
- Operacije
- Funkcije
Orodja trgovine
Thoriq vam je pokazal, kako lahko uporabite Sass iz ukazne vrstice z uporabo sass - ura ukaz.
Če imate raje orodja GUI, lahko greste z mojo osebno priljubljeno aplikacijo, Codekit, orodjem za spletne razvijalce za prevajanje Sass, združevanje, samodejno popravljanje in še veliko več. Prepros je še ena zelo zmogljiva aplikacija, ki se lahko uporablja na vseh sistemih. Oba sta plačane vloge vendar je vredno, če jih boste dolgoročno uporabljali.
Če želite samo preizkusiti Sass brez plačila ničesar lahko uporabite terminal, ali Koala (tukaj je naš pregled), brezplačna aplikacija, ki je bogata s številnimi funkcijami, ki jo lahko uporabite za premije..
Spremenljivke
Ena od prvih stvari, ki jih boste morali zaviti okoli, so spremenljivke. Če prihajate iz PHP ali podobnega ozadja kodiranja, bo to za vas druga narava. Spremenljivke so za shranjevanje bitov in kosov informacij za večkratno uporabo, kot vrednost barve, na primer:
$ primary_color: # 666666; .button color: $ primary_color; .imantant color: $ primary_color;
To se morda ne zdi uporabno tukaj, toda zamislite si, da imate 3000 vrstic kode. Če se vaša barvna shema spremeni, morate vsako vrednost barve zamenjati v CSS. S Sassom lahko samo spremenite vrednost od $ primary_color spremenljivko in jo naredimo z njo.
Za spremenljivke se uporablja shranjevanje imen pisave, velikosti, barv in drugih informacij. Pri večjih projektih je vredno vse vaše spremenljivke ekstrahirati v ločeno datoteko (pogledajmo, kako se to stori kmalu). To vam omogoča, da ponovno obarvate celoten projekt in spremenite pisave in druge ključne vidike brez dotikanja dejanskih pravil CSS. Vse kar morate storiti je spremeniti nekatere spremenljivke.
Gnezdenje
Druga osnovna funkcija, ki vam jo daje Sass, je sposobnost gnezdenja pravil. Predpostavimo, da izdelujete navigacijski meni. Imate nav element, ki vsebuje neurejen seznam, elemente seznama in povezave. V CSS lahko naredite nekaj takega:
#header nav / * Pravila za navigacijsko območje * / #header nav ul / * Pravila za meni * / #header nav li / * Pravila za elemente seznama * / #header nav a / * Pravila za povezave * /
V selektorjih se veliko ponavljamo. Če imajo elementi skupne korenine, lahko uporabimo ugnezdenje napišite naša pravila na veliko čistejši način.
Zgornja koda lahko izgleda v Sass:
#header nav / * Pravila za navigacijsko območje * / ul / * Pravila za meni * / li / * Pravila za elemente seznama * / a / * Pravila za povezave * /
Gnezdenje je izjemno koristno, ker je naredi sloge (veliko) bolj berljive. Z uporabo gnezdenja skupaj z ustreznim zamikom lahko dosežete visoko čitljive strukture kod, tudi če imate precej kode.
Ena od pomanjkljivosti gnezdenja je, da lahko nepotrebne specifičnosti. V zgornjem primeru sem navedel povezave z #header nav a. Uporabite lahko tudi #header nav ul li a kar bi bilo verjetno preveč.
V Sassu je veliko lažje biti zelo specifičen, saj je vse, kar morate storiti, gnezditi svoja pravila. Naslednje je veliko manj berljivo in precej specifično.
#header nav / * Pravila za navigacijsko območje * / ul / * Pravila za meni * / li / * Pravila za elemente seznama * / a / * Pravila za povezave * /
Razširitev nabor pravil
Razširitev bo znana, če delate s ciljno usmerjenimi jeziki. To je najbolje razumeti s pomočjo primera, ustvarimo 3 gumbe, ki sta rahlo različni.
.gumb display: inline-block; barva: # 000; ozadje: # 333; obrobni polmer: 4px; oblazinjenje: 8px 11px; .button-primary @extend .button; ozadje: # 0091C2 gumb-majhen @extend .button; velikost pisave: 0.9em; oblazinjenje: 3px 8px;
The .gumb-primarni in .gumb-majhen razredi vse razširijo .gumb pomeni, da prevzamejo vse njegove lastnosti in nato opredelijo svoje.
To je izjemno koristno v mnogih situacijah, kjer se lahko uporabljajo različice elementa. Sporočila (opozorilo / uspeh / napaka), gumbi (barve, velikosti), vrste menijev itd..
Eno opozorilo o podaljšanju je to ne bodo delovali v medijskih poizvedbah kot bi pričakovali. To je nekoliko naprednejše, vendar lahko o tem obnašanju preberete v Razumevanju izbirnikov rezervacij - selektorji rezervacij so posebna vrsta razširitve, o kateri bomo kmalu govorili..
Mixins
Mixins je še ena priljubljena funkcija uporabnikov procesorjev. Mixins so nabor pravil, ki jih je mogoče ponovno uporabiti - kot nalašč za pravila, ki veljajo za posamezne prodajalce, ali za kratka pravila za CSS.
Kako o ustvarjanju prehodnega pravila za elemente hover:
@mixing hover-effect -webkit-prehod: barva ozadja 200ms; -moz-prehod: barva ozadja 200ms; -o-prehod: barva ozadja 200ms; prehod: barva ozadja 200ms; vključi hover-učinek; . gumb @ vključi hover-učinek;
Mixins vam omogočajo tudi uporabo spremenljivk za določite vrednosti v mešanici. Zgornji primer lahko ponovno napišemo na dajte nam nadzor nad točnim časom prehoda. Morda bomo želeli gumbe za prehod malo počasnejši, na primer.
@mixin hover-effect ($ speed) -webkit-prehod: barva ozadja $ speed; -moz-prehod: barva ozadja $ speed; -o-prehod: barva ozadja $ speed; prehod: barva ozadja $ speed; vključi hover-učinek (200ms); . gumb @ vključi hover-učinek (300ms);
Placeholder Selectors
Z Sass 3.2 smo uvedli selektorje za rezervna mesta in rešili težavo, ki bi lahko povzročila malo napihnjenosti v ustvarjeni CSS kodi. Oglejte si to kodo, ki ustvarja sporočila o napakah:
.sporočilo font-size: 1.1em; oblazinjenje: 11px; meja-širina: 1px; mejni slog: trdna; .message-danger @extend .message; ozadje: # C20030; barva: #fff; obrobna barva: # A8002A; .message-success @extend .message; ozadje: # 7EA800; barva: #fff; obrobna barva: # 6B8F00;
Najverjetneje je, da razred sporočil ne bo nikoli uporabljen v HTML-ju: bil je ki jih je treba razširiti, ne uporablja se, kot je. To povzroča malo napihnjenosti v ustvarjenem CSS-ju. Da bo vaša koda učinkovitejša, lahko uporabite izbirnik ograde, ki je označen z znakom za odstotek:
% message font-size: 1.1em; oblazinjenje: 11px; meja-širina: 1px; mejni slog: trdna; .message-danger @extend% gumb; ozadje: # C20030; barva: #fff; obrobna barva: # A8002A; .sporočilo-uspeh @extend% gumb; ozadje: # 7EA800; barva: #fff; obrobna barva: # 6D9700;
Na tej stopnji se morda sprašujete, kakšna je razlika med razširjenimi in mešanicami. Če uporabljate ograde, se obnašajo kot mešanica brez parametrov. To je res, vendar se rezultati v CSS razlikujejo. Razlika je v tem mixins podvaja pravila medtem ograde bodo zagotovile, da bodo enaka pravila delila selektorje, rezultat je manj CSS na koncu.
Operacije
Težko se je upreti igri, toda za zdaj se bom vzdržala vseh medicinskih šal. Operaterji vam omogočajo, da naredite nekaj matematike v vaši CSS kodi in je lahko precej koristna. Primer v vodniku Sass je idealen za prikaz tega:
.posoda širina: 100%; članek float: levo; širina: 600px / 960px * 100%; razveljavi float: desno; širina: 300px / 960px * 100%;
Zgornji primer ustvari sistem, ki temelji na 960px, z minimalnimi težavami. To bo lepo sestavilo naslednje CSS:
.posoda širina: 100%; članek float: levo; širina: 62,5%; razveljavi float: desno; širina: 31,25%;
Ena odlična uporaba, ki jo najdem za operacije, je dejansko mešanje barv. Če pogledate sporočilo o uspehu Sass, ni jasno, da ima barva ozadja in meja nekakšen odnos. S tem, ko odštejemo odtenek sive barve, lahko potemnemo barvo, tako da je razmerje vidno:
$ primary: # 7EA800; .message-success @extend% gumb; ozadje: $ primary; barva: #fff; border-color: $ primary - # 111;
Če je barva svetlejša, bo temnejši odtenek. Svetlejša je dodana barva, lažja pa je odtenek.
Funkcije
Na voljo je veliko število funkcij: številske funkcije, funkcije nizov, funkcije seznama, barvne funkcije in drugo. Oglejte si dolg seznam v dokumentaciji razvijalca. Tukaj bom pogledal par, da vam pokažem, kako delujejo.
The razsvetli in potemnijo Funkcijo lahko uporabite za spreminjanje svetlosti barve. To je boljše od odštevanja odtenkov, zato je vse bolj modularno in očitno. Oglejte si naš prejšnji primer s funkcijo zatemnitve.
$ primary: # 7EA800; .message-success @extend% gumb; ozadje: $ primary; barva: #fff; obrobna barva: potemni ($ primarni, 5);
Drugi argument funkcije je odstotek zahtevanega zatemnitve. Vse funkcije imajo parametre; Oglejte si dokumentacijo, da vidite, kaj so! Tu je še nekaj drugih samodejnih barvnih funkcij: desaturate, nasičena, invert, sivine.
The ceil Funkcija, tako kot v PHP, vrne številko, zaokroženo na naslednje celo število. To lahko uporabite pri izračunu širine stolpcev ali če ne želite uporabiti veliko decimalnih mest v končnem CSS-ju.
.title font-size: ceil ($ title_size * 1.3314);
Pregled
Funkcije v Sassu nam dajejo veliko moč, da z manj napora napišemo CSS. Pravilna uporaba mixinov, razširitev, funkcij in spremenljivk bo naredila naše sloge bolj vzdržljive, bolj berljive in lažje pisane.
Če vas zanima še en podoben predprocesor CSS, predlagam, da si ogledate LESS (ali si oglejte naš vodič za začetnike) - osnovna glavnica je skoraj enaka!
