Uvod v Sass inštalacijo in osnove
V tej objavi bomo razpravljali o predprocesorju CSS, imenovanem Sass ali Syntactically Awesome Stylesheets.
Če ste sledili našim prejšnjim objavam v LESS, smo prepričani, da ste seznanjeni z Preprocesor CSS. Oba Sass in LESS sta predprocesorja CSS, ki v glavnem razširjata način, kako sestavimo navaden-statični CSS na bolj dinamičen način z uporabo programskih jezikov, kot so spremenljivke, mixins in funkcije..
Namestitev Sassa
Preden lahko sestavimo Sass, ga moramo namestiti. Sass je zgrajen na Ruby. Če delate na Macu, so verjetno že nameščeni Ruby. Če želite namestiti Ruby v operacijskem sistemu Windows, uporabite ta namestitveni program Ruby.
Ko je namestitev končana, lahko obiščete Terminal (v računalniku Mac) ali v ukaznem pozivu (v sistemu Windows) in vnesite v to vrstico ukazno vrstico:
Na Macu;
sudo gem namestite sass
V operacijskem sistemu Windows;
gem namestite sass
Če je namestitev uspešna, boste imeli v svojem terminalskem / ukaznem pozivu naslednje obvestilo.
Nato moramo izbrati, kateri imenik za Sass gledati z naslednjim ukazom;
sass - ura pot / sass-directory
Zgornja ukazna vrstica bo gledala vsak .scss/.sass datotek v pot / imenik in vsakič, ko se spremeni ena od datotek v tem imeniku, bo Sass posodobil ustrezne datoteke ali pa jih ustvaril, če ne obstaja.
Če potrebujemo Sass za ustvarjanje datotek v določenem imeniku, lahko to naredimo na ta način;
sass - ura poti / sass-directory: path / css-directory
Z ukazno vrstico lahko gledamo tudi določeno datoteko namesto imenika;
sass - ura poti / sass-directory / styles.css
Če ukaza za uro uspe, se bo nekaj podobnega temu obvestilu spodaj prikazalo v vašem terminalskem / ukaznem pozivu.
Nadaljnje branje: Samodejno sestavljanje datotek Sass s Sass 3
Aplikacije Sass
Vendar, če sovražite delo prek terminala ali ukaznega poziva, lahko uporabite nekaj aplikacij za Sass. Brezplačna možnost je Scout; zgrajen je na Adobe Airu, zato ga je mogoče zagnati v vseh operacijskih sistemih (Windows, OSX in Linux).
Vendar pa poteka zelo počasi, kot so nekateri že poročali.
Torej, če nimate potrpljenja za to, obstaja tudi nekaj plačanih možnosti. Cena se razlikuje za vsako aplikacijo, Compass.app velja za 10 $, Fire.app, $ 14 in Codekit za 25 $.
Označevanje kode
Čeprav je Sass predvsem razširitev CSS, vaš trenutni urejevalnik morda ne bo pravilno označil skladnje. Na srečo že obstajajo nekateri paketi za skoraj vsak urejevalnik kod .sass ali .scss označevanje kode.
Če delate s Sublime Text 2, kot jaz, lahko uporabite te pakete; Sublime Text HAML & Sass in Sublime Text 2 Sass paket, in za lažji način, lahko namestite enega od teh paketov prek nadzora paketov.
Za druge urejevalnike kode glejte spodaj ali poskusite Googling.
- Ta je odličen screencast tutorial o delu na Sass s Dreamweaver
- Sass Mode za Coda. Vendar se zdi, da je bil ta način integriran s kodo od različice 2
- TextMate Uradni SCSS paket
- Espresso Sugar za Sass
- Paketi InType
Jezik jezika
Sass in LESS dejansko delita nekaj skupnih jezikov, spodaj je nekaj od njih.
Spremenljivke
$ color-base: # 000; $ width: 100px;
Edina razlika od spremenljivk LESS je, da je spremenljivka v Sass definirana z a $ znak.
Pravila gnezdenja
header širina: 980px; višina: 80px; nav ul list-style: nič; oblazinjenje: ni; marža: nič; li prikaz: inline; a text-decoration: none;
Mešanice in funkcije
@mixin obodni polmer ($ polmer) -moz-border-radius: $ radius; -webkit-border-radius: $ radius; -ms-border-radius: $ radius; polmer meje: $ polmer;
Operacije
li širina: $ width / 5 - 10px;
Pogojna izjava
@if lahkost ($ color-base)> = 51% background-color: # 333333; @else background-color: #ffffff;
V LESS lahko naredite podobno stvar preko izraza Guard, o čemer smo govorili v tem vodiču.
Končna misel
In to je to. V naslednjem prispevku bomo začeli raziskovati Sassove jezike in njegovega spremljevalca Compass. Ostani na vezi.
