Sass paigaldamise ja põhitõedega alustamine

Selles postituses arutame CSS Preprocessorit, mida nimetatakse Sass või Syntaktiliselt Awesome Stylesheets.

Kui olete jälginud meie varasemaid postitusi LESS-is, siis oleme kindlad, et olete sellega kursis CSS eelprotsessor. Nii Sass kui ka LESS on CSS Preprocessors, mis peamiselt laiendavad tavalise staatilise CSS-i koostamise dünaamilisemal viisil, kasutades programmeerimiskeeli, nagu Variables, Mixins ja Functions.

Sassi installimine

Enne kui me saame Sassi koostada, peame selle installima. Sass on ehitatud Ruby'le. Kui töötate Maciga, on tõenäoline, et teil on juba paigaldatud Ruby. Kui võite installida Ruby Windowsi, kasutage seda Ruby Installerit.

Kui installimine on lõppenud, võite minna terminali (Mac) või käsureal (Windowsis) ja seejärel sisesta järgmine käsurida:

Macis;

 sudo gem installige sass 

Windowsis;

 gem install sass 

Kui installimine õnnestub, on teie terminalis / käsuviipus järgmine teade.

Järgmiseks peame valima, millist kataloogi Sass vaatab, kasutades järgmist käsku;

 sass - watch path / sass-directory 

Ülaltoodud käsurida vaatab iga kord .scss/.sass faile tee / kataloog ja kui üks selle kataloogi failidest muutub, Sass uuendab vastavaid faile või loob neid, kui neid ei ole.

Kui me vajame Sassit failide genereerimiseks konkreetses kataloogis, saame seda teha;

 sass - watch path / sass-directory: tee / css-kataloog 

Selle käsurea abil saame vaadata ka konkreetset faili, mitte kataloogi;

 sass - watch path / sass-directory / styles.css 

Kui käskluskäsu õnnestub, kuvatakse teie terminali / käsuviipiga midagi sellist teatist.

Lisalugemist: Sass-failide automaatne kompileerimine Sass 3-ga

Sass-rakendused

Kui te aga vihkate terminali või käsuviipiga töötamise eest, saate Sassile mõningaid rakendusi kasutada. Vaba valik on Scout; see on ehitatud Adobe Airile, nii et seda saab kasutada kõikides operatsioonisüsteemides (Windows, OSX ja Linux).

Siiski on see väga aeglane, nagu mõned on varem teatanud.

Seega, kui teil ei ole kannatust selle eest, on ka mõned tasulised võimalused. Hind varieerub iga rakenduse puhul, Compass.app läheb $ 10, Fire.app, $ 14 ja Codekit eest $ 25 eest.

Koodi esiletõstmine

Kuigi Sass on peamiselt CSS-laiend, ei pruugi teie praegune redaktor süntaksit õigesti esile tõsta. Õnneks on peaaegu iga koodiredaktori jaoks juba mõned paketid, mis võimaldavad seda teha .sass või .scss koodi esiletõstmine.

Kui töötate Sublime Text 2-ga nagu mina, saate neid pakette kasutada; Sublimeeritud teksti HAML & Sass ja Sublime Text 2 Sass pakett ja lihtsamal viisil saate installida ühe neist pakettidest pakettide haldamise kaudu.

Teiste koodiredaktorite puhul vaata allpool või proovige seda Google'i jaoks.

• See on suurepärane screencast-juhendaja, mis käsitleb Dreamweaveriga Sassiga töötamist
• Soda režiim Codale. Kuid tundub, et see režiim on integreeritud Codaga alates versioonist 2
• TextMate ametlik SCSS pakett
• Espresso-suhkur Sassile
• InType Bundles

Sass keel

Sass ja LESS jagavad tegelikult mõningaid ühiseid keeli, allpool on mõned neist.

Muutujad

 $ color-base: # 000; $ laius: 100 px; 

Ainus erinevus LESS-i muutujatest on see, et muutuja Sassis on defineeritud a-ga $ märk.

Pesitsuseeskirjad

 päis laius: 980px; kõrgus: 80 px; nav ul list-style: no; polsterdus: mitte; varu: puudub;  li kuva: inline; a text-decoration: no;  

Segud ja funktsioonid

 @mixin border-radius ($ radius) -moz-border-radius: $ raadius; -webkit-border-radius: $ raadius; -ms-piiri-raadius: $ raadius; raadius: $ raadius;  

Toimingud

 li laius: $ width / 5 - 10px;  

Tingimuslik avaldus

 @if kergus ($ color-base)> = 51% taustavärv: # 333333;  @else taustavärv: #ffffff;  

LESSis võite teha sarnase asja Guardi väljenduse kaudu, mida me oleme selles juhendis käsitlenud.

Lõplik mõte

Ja see ongi kõik. Järgmisel ametikohal hakkame uurima Sassi keeli ja selle kaaslast, kompassi. Hoidke häälestatud.