Darbo pradžia su „Sass“ diegimu ir pagrindais

Šiame pranešime aptarsime CSS Preprocessor'ą, vadinamą Sass arba Syntaktiškai nuostabios stilių lentelės.

Jei sekėte ankstesnius pranešimus apie „LESS“, esame tikri, kad esate susipažinę su CSS išankstinis apdorojimas. Tiek „Sass“, tiek „LESS“ yra „CSS Preprocessors“, kurie iš esmės išplėsti būdą, kaip mes sudarome paprastą-statinį-CSS dinamiškesniu būdu, naudojant programavimo kalbas, pvz., Kintamuosius, mišinius ir funkcijas..

„Sass“ diegimas

Prieš mes galime sukurti „Sass“, turime ją įdiegti. Sass yra pastatytas ant Ruby. Jei dirbate su „Mac“, yra tikimybė, kad jau įdiegėte „Ruby“. Jei galite įdiegti „Ruby“ į „Windows“, naudokite šį „Ruby Installer“.

Baigę diegti, galite pereiti į terminalą („Mac“) arba komandų eilutėje („Windows“), tada į jį įveskite šią komandinę eilutę:

„Mac“;

 sudo gem install sass 

„Windows“;

 perlas įdiegti sass 

Jei diegimas pavyksta, jūsų terminalo / komandų eilutėje turėsite tokį pranešimą.

Be to, mes turime pasirinkti, kurį katalogą Sass žiūrėti naudojant šią komandą;

 sass -watch path / sass-directory 

Pirmiau minėta komandų eilutė stebės kiekvieną .scss/.sass failai kelias / katalogas ir kai bus pakeistas vienas iš to katalogo failų, „Sass“ atnaujins atitinkamus failus arba sukurs juos, jei jų nėra.

Jei mums reikia Sass generuoti failus konkrečiame kataloge, tai galime tai padaryti;

 sass -watch maršrutas / sass-directory: path / css-directory 

Su šia komandų eilute taip pat galime žiūrėti konkretų failą, o ne katalogą;

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

Jei stebėjimo komanda pavyksta, jūsų terminalo / komandų eilutėje atsiras kažkas panašaus į šį pranešimą.

Papildoma literatūra: Automatinis Sass failų kompiliavimas su Sass 3

„Sass“ programos

Tačiau, jei nekenate dirbti per terminalą arba komandų eilutę, galite naudoti kai kurias „Sass“ programas. Nemokamas variantas yra „Scout“; ji yra pastatyta „Adobe Air“, todėl ją galima paleisti visose OS („Windows“, „OSX“ ir „Linux“).

Tačiau, kaip jau buvo pranešta anksčiau, ji veikia labai lėtai.

Taigi, jei neturite to kantrybės, taip pat yra keletas mokamų galimybių. Kaina skiriasi kiekvienai programai, Compass.app už $ 10, „Fire.app“, $ 14 ir „Codekit“ už 25 USD.

Kodo paryškinimas

Nors „Sass“ visų pirma yra CSS plėtinys, jūsų dabartinis redaktorius gali netinkamai pabrėžti sintaksę. Laimei, jau yra keli paketai beveik bet kuriam kodo redaktoriui, kad jį būtų galima įjungti .sass arba .scss kodo paryškinimas.

Jei dirbate su „Sublime Text 2“, kaip aš, galite naudoti šiuos paketus; Sublime Text HAML & Sass ir Sublime Text 2 Sass paketą, taip pat lengviau galite įdiegti vieną iš šių paketų, naudodami paketo valdymą.

Kitiems kodų redaktoriams žr. Toliau arba pabandykite „Google“ už jį.

• Tai yra puiki screencast pamoka, skirta dirbti su „Sass“ su „Dreamweaver“
• „Soda“ režimas „Coda“. Tačiau atrodo, kad šis režimas buvo integruotas su „Coda“ nuo 2 versijos
• TextMate oficialus SCSS paketas
• Espresso cukrus Sassui
• „InType“ paketai

Sass kalba

„Sass“ ir „LESS“ iš tikrųjų dalijasi kai kuriomis bendromis kalbomis, žemiau yra keletas iš jų.

Kintamieji

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

Vienintelis skirtumas nuo LESS kintamųjų yra tas, kad Sass kintamasis yra apibrėžtas a $ ženklas.

Lizdavimo taisyklės

 antraštė plotis: 980px; aukštis: 80 pikselių; nav ul list-style: nėra; paminkštinimas: nėra; marža: nėra;  li ekranas: inline; teksto apdaila: nėra;  

Mišiniai ir funkcijos

 @mixin border-radius ($ spindulys) -moz-border-radius: $ spindulys; -webkit-border-radius: $ spindulys; -ms-border-spindulys: $ spindulys; sienos spindulys: $ spindulys;  

Operacijos

 li plotis: $ width / 5 - 10px;  

Sąlyginis pareiškimas

 @if šviesumas ($ color-base)> = 51% fono spalva: # 333333;  @elė fono spalva: #ffffff;  

LESS jūs galite padaryti panašų dalyką per Guard išraišką, kurią aptarėme šioje pamokoje.

Galutinė mintis

Štai ir viskas. Kitame pranešime pradėsime tyrinėti „Sass“ kalbas ir jo kompanioną „Compass“. Būkite sureguliuoti.