Početak rada sa Sass instalacijom i osnovama
U ovom postu raspravljamo o CSS Preprocessoru zvanom Sass ili Sintaktički stila stilova.
Ako ste pratili naše prethodne postove na MANJI, sigurni smo da ste upoznati s CSS pretprocesor. I Sass i LESS su CSS Preprocessori koji prvenstveno proširuju način na koji komponiramo običan-static-CSS na dinamičniji način koristeći programske jezike kao što su varijable, mixins i funkcije.
Instaliranje Sassa
Prije nego što možemo sastaviti Sass moramo ga instalirati. Sass je izgrađen na Ruby. Ako radite na Macu, vjerojatno ste već instalirali Ruby. Ako možete instalirati Ruby u Windows, koristite ovaj Ruby Installer.
Nakon dovršetka instalacije možete otići na Terminal (na Mac računalu) ili u naredbeni redak (u sustavu Windows) te u njega upisati sljedeći redak:
Na Macu;
sudo gem instalirati sass
U sustavu Windows;
gem instalirajte sass
Ako instalacija uspije, imat ćete sljedeću obavijest u vašem Terminal / Command Prompt.
Zatim moramo odabrati koji će direktorij Sass gledati pomoću sljedeće naredbe;
sass - put staze / sass-direktorij
Gore navedeni naredbeni redak će gledati svaki .scss/.Sass datoteka u sustavu Put / direktorij i kad god se jedna od datoteka u tom direktoriju promijeni, Sass će ažurirati odgovarajuće datoteke ili je stvoriti ako ne postoji.
Ako trebamo Sass za generiranje datoteka u određenom direktoriju, možemo to učiniti na ovaj način;
sass - staza puta / sass-direktorij: put / css-direktorij
Također možemo gledati određenu datoteku, a ne direktorij, pomoću ove naredbene linije;
sass - put staze / sass-direktorij / styles.css
Ako naredba gledanja uspije, nešto poput ove obavijesti u nastavku pojavit će se u vašem Terminal / Command Prompt.
Daljnje čitanje: Automatsko kompiliranje Sass datoteka s Sass 3
Sass aplikacije
Međutim, ako mrzite rad preko terminala ili naredbenog retka, možete koristiti neke aplikacije za Sass. Slobodna opcija je Scout; Izrađen je na Adobe Airu tako da se može pokrenuti na svim OS-ima (Windows, OSX i Linux).
Međutim, radi vrlo sporo, kao što su neki već izvijestili.
Dakle, ako nemate strpljenja za to, postoje i neke plaćene opcije. Cijena varira za svaku aplikaciju, Compass.app ide za $ 10, Fire.app, $ 14 i Codekit za $ 25.
Označavanje koda
Iako je Sass primarno CSS proširenje, vaš trenutni editor možda neće ispravno istaknuti sintaksu. Srećom, već postoje neki paketi koji omogućuju gotovo svaki uređivač koda .Sass ili .scss označavanje koda.
Ako radite sa Sublime Text 2 kao i ja, možete koristiti ove pakete; Sublime Text HAML & Sass i Sublime Text 2 Sass paket, a za lakši način, možete instalirati jedan od ovih paketa kroz kontrolu paketa.
Za ostale uređivače koda pogledajte dolje ili pokušajte s Googlingom.
- Ovaj je veliki screencast udžbenik o radu na Sassu s Dreamweaverom
- Sass mod za Coda. No, čini se da je ovaj način integriran s programom Coda od verzije 2. \ t
- TextMate Službeni SCSS paket
- Šećer za espresso za Sass
- Paketi InType
Jezik jezika
Sass i MANJE zapravo dijele neke zajedničke jezike, ispod su neke od njih.
Varijable
$ color-base: # 000; $ width: 100px;
Jedina razlika u odnosu na LESS varijable je da je varijabla u Sassu definirana a $ znak.
Pravila gniježđenja
header širina: 980px; visina: 80px; nav ul list-style: nema; padding: nema; margina: nema; li display: inline; a text-decoration: none;
Mixins i funkcije
@mixin granica-radijus ($ radijus) -moz-border-radius: $ radius; -webkit-border-radius: $ radijus; -ms-border-radius: $ radius; radijus granice: $ radijus;
operacije
li širina: $ width / 5 - 10px;
Uvjetna izjava
@if svjetlost ($ color-base)> = 51% pozadinska boja: # 333333; @else background-color: #ffffff;
U LESS-u možete napraviti sličnu stvar preko Guard izraza, o čemu smo govorili u ovom vodiču.
Konačna misao
I to je to. U sljedećem postu, početi ćemo istraživati Sassove jezike i njegova pratitelja, Compass. Ostanite s nama.
