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.