Noțiuni de bază cu instalarea Sass și elementele de bază

În acest post, vom discuta un Preprocesor CSS numit Sass sau Șabloane de stil sinaptice minunate.

Dacă ați urmat postările noastre anterioare pe LESS, suntem siguri că sunteți familiarizați cu Preprocesor CSS. Atât Sass, cât și LESS sunt Preprocesoarele CSS care extind în primul rând modul în care compunem CSS simplu-static într-un mod mai dinamic utilizând limbi de programare precum Variables, Mixins și Functions.

Instalarea Sass

Înainte de a putea compune Sass, trebuie să o instalăm. Sass este construit pe Ruby. Dacă lucrați pe un Mac, este posibil să aveți deja instalat Ruby. Dacă este posibil să instalați Ruby în Windows, utilizați acest program de instalare Ruby.

După ce ați terminat instalarea, puteți accesa Terminal (pe un Mac) sau în Command Prompt (pe Windows), apoi tastați următoarea linie de comandă:

Pe Mac;

 sudo gem instala sass

Pe Windows;

 gem install sass

Dacă instalarea este reușită, veți primi următoarea notificare în Terminal / Command Prompt.

Apoi, trebuie să selectăm ce director să se uite la Sass utilizând următoarea comandă;

 sass - urmăriți calea / directorul sass

Linia de comandă de mai sus va viziona fiecare .SCSS/.Sass fișiere în cale / director și ori de câte ori unul din fișierele din directorul respectiv este schimbat, Sass va actualiza fișierele corespunzătoare sau va crea unul dacă nu există.

Dacă avem nevoie de Sass pentru a genera fișiere într-un director specific, putem face acest lucru;

 sass - urmăriți calea / sass-directorul: path / css-directory

De asemenea, putem viziona un fișier specific, mai degrabă decât directorul, cu această linie de comandă;

 sass - urmăriți calea / sass-director / styles.css

Dacă comanda de urmărire survine, va apărea ceva similar cu această notificare de mai jos în Terminal / Command Prompt.

Citirea în continuare: Auto-Compilați fișiere Sass cu Sass 3

Sass Aplicații

Cu toate acestea, dacă vă urâți să lucrați prin Terminal sau Command Prompt, puteți utiliza unele aplicații pentru Sass. Opțiunea gratuită este Scout; este construit pe Adobe Air, astfel încât poate fi rulat pe toate sistemele de operare (Windows, OSX și Linux).

Cu toate acestea, este foarte lent, așa cum au raportat anterior unii.

Deci, dacă nu aveți răbdare pentru aceasta, există și unele opțiuni plătite. Prețul diferă pentru fiecare aplicație, Compass.app este valabil pentru $ 10, Fire.app, $ 14 și Codekit pentru $ 25.

Evidențierea codului

Deși Sass este în primul rând o extensie CSS, editorul dvs. curent nu poate evidenția sintaxa corectă. Din fericire, există deja unele pachete pentru aproape orice editor de cod pentru a permite .Sass sau .SCSS codul de evidențiere.

Dacă lucrați cu Sublime Text 2 ca mine, puteți folosi aceste pachete; Sublime Text HAML & Sass și Text Sublim 2 Pachet Sass și, pentru un mod mai ușor, puteți instala unul din aceste pachete prin Controlul pachetelor.

Pentru ceilalți editori de coduri, consultați mai jos sau încercați Googling pentru aceasta.

Acesta este un tutorial excelent pentru a lucra la Sass cu Dreamweaver
Modul Sass pentru Coda. Dar, se pare că acest mod a fost integrat cu Coda ca și versiunea 2
TextMate oficial SCSS Bundle
Espresso de zahăr pentru Sass
InType Bundles

Sass Language

Sass și LESS de fapt împărtășesc câteva limbi comune, mai jos sunt câteva dintre ele.

variabile

 $ color-base: # 000; $ lățime: 100px;

Singura diferență de variabilele LESS este că variabila din Sass este definită cu a $ semn.

Reguli de gătire

 header width: 980px; înălțime: 80px; nav ul list-style: nici unul; padding: nici unul; marja: niciuna;  li afișare: inline; a text-decoration: none;

Mixuri și funcții

 @mixin border-radius (raza $) -moz-border-radius: $ radius; -webkit-border-radius: raza $; -ms-raza de graniță: raza $; raza radiului: raza $;

Operațiuni

 li lățime: $ lățime / 5 - 10px;

Declarație condiționată

 @if lumina ($ color-base)> = 51% background-color: # 333333;  @else background-color: #ffffff;

În LESS, puteți face un lucru similar prin expresia Gardă, despre care ne-am referit în acest tutorial.

Gândirea finală

Si asta e. În următorul post, vom începe să explorăm limbile Sass și companionul său, Compass. Rămâneți aproape.