Guida introduttiva all'installazione di Sass e alle nozioni di base

In questo post, discuteremo un preprocessore CSS chiamato Sass o Stili di stile sintatticamente fantastici.

Se hai seguito i nostri post precedenti su LESS, siamo sicuri che hai familiarità con Preprocessore CSS. Sia Sass che LESS sono CSS Preprocessor che estendono principalmente il modo in cui si compongono i CSS statici semplici in modo più dinamico utilizzando linguaggi di programmazione come Variabili, Mixin e Funzioni.

Installare Sass

Prima di poter comporre Sass, dobbiamo installarlo. Sass è costruito su Ruby. Se stai lavorando su un Mac, è probabile che tu abbia già installato Ruby. Se è possibile installare Ruby in Windows, utilizzare questo programma di installazione di Ruby.

Una volta completata l'installazione, puoi andare su Terminale (su Mac) o in Prompt dei comandi (su Windows), quindi digitare la seguente riga di comando al suo interno:

Su Mac;

 sudo gem installa sass 

Su Windows;

 gem install sass 

Se l'installazione ha esito positivo, avrai la seguente notifica nel tuo terminale / prompt dei comandi.

Successivamente, dobbiamo selezionare la directory che Sass deve guardare usando il seguente comando;

 sass --watch path / sass-directory 

La riga di comando sopra vedrà tutti .SCSS/.insolenza file in percorso / directory e ogni volta che viene modificato uno dei file in quella directory, Sass aggiorna i file corrispondenti o creane uno se non ne esiste nessuno.

Se abbiamo bisogno di Sass per generare i file in una directory specifica, possiamo farlo in questo modo;

 sass --watch path / sass-directory: percorso / css-directory 

Possiamo anche guardare un file specifico piuttosto che la directory, con questa riga di comando;

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

Se il comando watch ha esito positivo, qualcosa di simile alla seguente notifica apparirà nel tuo terminale / prompt dei comandi.

Ulteriori letture: Compila automaticamente i file Sass con Sass 3

Applicazioni Sass

Tuttavia, se non riesci a utilizzare Terminale o Prompt dei comandi, puoi utilizzare alcune applicazioni per Sass. L'opzione gratuita è Scout; è basato su Adobe Air, quindi può essere eseguito su tutti i sistemi operativi (Windows, OSX e Linux).

Tuttavia, funziona molto lentamente come alcuni hanno segnalato in precedenza.

Quindi se non hai la pazienza per questo, ci sono anche alcune opzioni a pagamento. Il prezzo varia per ogni app, Compass.app va per $ 10, Fire.app, $ 14 e Codekit per $ 25.

Evidenziazione del codice

Sebbene Sass sia principalmente un'estensione CSS, il tuo editor corrente potrebbe non evidenziare correttamente la sintassi. Fortunatamente, ci sono già alcuni pacchetti per quasi tutti gli editor di codice da abilitare .insolenza o .SCSS evidenziazione del codice.

Se stai lavorando con Sublime Text 2 come faccio io, puoi usare questi pacchetti; Sublime Text HAML & Sass e Sublime Text 2 Pacchetto Sass, e per un modo più semplice, è possibile installare uno di questi pacchetti tramite Package Control.

Per altri editor di codice, vedi sotto, o prova a cercare su Google.

• Questo è un grande tutorial per screencast su come lavorare su Sass con Dreamweaver
• Modalità Sass per Coda. Ma sembra che questa modalità sia stata integrata con Coda a partire dalla versione 2
• Bundle ufficiale SCSS TextMate
• Zucchero Espresso per Sass
• Pacchetti InType

Sass Lingua

Sass e LESS condividono effettivamente alcune lingue comuni, sotto ci sono alcune di esse.

variabili

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

L'unica differenza rispetto alle variabili LESS è che la variabile in Sass è definita con a $ cartello.

Regole di annidamento

 header width: 980px; altezza: 80 px; nav ul list-style: none; imbottitura: nessuna; margine: nessuno;  li display: inline; a decorazione del testo: nessuna;  

Mixin e funzioni

 @mixin border-radius ($ radius) -moz-border-radius: $ radius; -webkit-border-radius: $ radius; -ms-border-radius: $ radius; raggio-bordo: raggio $;  

operazioni

 li larghezza: $ larghezza / 5 - 10 px;  

Dichiarazione condizionale

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

In LESS si può fare una cosa simile tramite l'espressione Guard, di cui abbiamo parlato in questo tutorial.

Pensiero finale

E questo è tutto. Nel prossimo post, inizieremo ad esplorare le lingue Sass e il suo compagno, Compass. Rimanete sintonizzati.