Aloittaminen Sass-asennuksen ja perusasioiden avulla
Tässä viestissä keskustelemme CSS Preprocessorista, jota kutsutaan nimellä Sass tai Syntaktisesti awesome-tyylit.
Jos olet seurannut aiempia LESS-viestejä, olemme varmoja siitä, että olet perehtynyt CSS Preprocessor. Sekä Sass että LESS ovat CSS-esiprosessoreita, jotka laajentavat ensisijaisesti tavallista staattista CSS: ää dynaamisemmalla tavalla käyttämällä ohjelmointikieliä kuten muuttujia, sekoittimia ja toimintoja.
Sassin asentaminen
Ennen kuin voimme säveltää Sassin, meidän on asennettava se. Sass on rakennettu Rubyn päälle. Jos työskentelet Mac-tietokoneella, sinulla on jo mahdollisuus asentaa Ruby. Jos voit asentaa Rubyn Windowsiin, käytä tätä Ruby Installer -ohjelmaa.
Kun asennus on valmis, voit siirtyä Terminaliin (Macissa) tai Komentorivi (Windowsissa) ja kirjoita siihen seuraava komentorivi:
Macissa;
sudo gem asenna sass
Windowsissa;
gem asentaa sass
Jos asennus onnistuu, terminaali / komentokehote sisältää seuraavan ilmoituksen.
Seuraavaksi meidän on valittava, mihin hakemistoon Sass katsella, seuraavalla komennolla;
sass -watch-polku / sass-hakemisto
Yllä oleva komentorivi tulee katsomaan jokaista .SCSS/.nenäkkyys tiedostoja polku / hakemisto ja kun jokin kyseisen hakemiston tiedostoista muuttuu, Sass päivittää vastaavat tiedostot tai luo sellaisen, jos sitä ei ole.
Jos tarvitsemme Sassin luomaan tiedostot tietyssä hakemistossa, voimme tehdä sen tällä tavalla;
sass -watch-polku / sass-hakemisto: polku / css-hakemisto
Tällä komentorivillä voi myös katsella tietyn tiedoston hakemiston sijasta;
sass - kellon polku / sass-hakemisto / styles.css
Jos kellokomento onnistuu, alla oleva ilmoitus näkyy Terminal / Command Promptissa.
Lue lisää: Sass-tiedostojen automaattinen kääntäminen Sass 3: lla
Sass-sovellukset
Jos kuitenkin vihaat työskentelyä terminaalin tai komentorivin kautta, voit käyttää joitakin Sassin sovelluksia. Vapaa vaihtoehto on Scout; se on rakennettu Adobe Airiin, joten sitä voidaan käyttää kaikissa käyttöjärjestelmissä (Windows, OSX ja Linux).
Se kuitenkin kulkee hyvin hitaasti, kuten jotkut ovat aiemmin ilmoittaneet.
Joten jos sinulla ei ole kärsivällisyyttä, on myös joitakin maksettuja vaihtoehtoja. Hinta vaihtelee jokaista sovellusta kohden, Compass.app on $ 10, Fire.app, 14 dollaria ja Codekit 25 dollaria kohden.
Koodin korostus
Vaikka Sass on ensisijaisesti CSS-laajennus, nykyinen editori ei ehkä korosta syntaksia oikein. Onneksi on jo olemassa joitakin paketteja lähes minkä tahansa koodieditorin käyttöön ottamiseksi .nenäkkyys tai .SCSS koodin korostus.
Jos työskentelet Sublime Text 2: n kanssa, kuten minä, voit käyttää näitä paketteja; Tekstin HAML & Sass ja Sublime Text 2 Sass-paketti voidaan poistaa ja helpommin asentaa yksi näistä paketeista Paketinhallinnan avulla.
Muita koodieditoreja, katso alla, tai kokeile Googlelle sitä.
- Tämä on hieno screencast-opetusohjelma, jossa käsitellään Sassin käyttöä Dreamweaverin kanssa
- Soda-tila Codalle. Näyttää kuitenkin siltä, että tämä tila on integroitu Codaan versiosta 2 alkaen
- TextMate Virallinen SCSS-paketti
- Espresso Sugar Sassille
- InType-paketit
Sass-kieli
Sass ja LESS jakavat todellakin joitakin yhteisiä kieliä. Alla on muutamia niistä.
muuttujat
$ color-base: # 000; $ leveys: 100px;
Ainoa ero LESS-muuttujista on, että muuttuja Sassissa on määritelty a: lla $ merkki.
Pesimisäännöt
otsikko leveys: 980px; korkeus: 80px; nav ul list-style: ei; pehmuste: ei; marginaali: ei; li näyttö: inline; a text-decoration: ei mitään;
Sekoitus ja toiminnot
@mixin-raja-säde ($ säde) -moz-border-radius: $ säde; -webkit-border-radius: $ säde; -ms-border-säde: $ säde; raja-säde: $ säde;
toiminnot
li leveys: $ leveys / 5 - 10px;
Ehdollinen ilmoitus
@if vaaleus ($ color-base)> = 51% taustaväri: # 333333; @else taustaväri: #ffffff;
LESSissä voit tehdä samanlaisen asian Guard-ilmaisun kautta, jota olemme käsitelleet tässä opetusohjelmassa.
Lopullinen ajatus
Ja se on niin. Seuraavassa postissa aloitamme Sass-kielten ja sen kumppanin, Compassin, tutkimisen. Pysy kanavalla.
