Una guida semplice e facile da capire per Sass

Qualche tempo fa Thoriq Firdaus ha scritto un ottimo articolo su come iniziare con Sass che ti ha mostrato come installare e utilizzare questo linguaggio di preprocessore CSS estremamente utile (potresti voler controllare, sai, per iniziare).

In questo articolo ho pensato di darti un po 'di più informazioni su cosa puoi fare con Sass e su come gli sviluppatori lo usano ogni giorno per creare un codice CSS migliore e più modulare. Vai avanti alla sezione che desideri:

• Strumenti del mestiere
• variabili
• annidamento
• Estendere i set di regole
• mixins
• Selettori segnaposto
• operazioni
• funzioni

Strumenti del mestiere

Thoriq ti ha mostrato come puoi usare Sass dalla riga di comando usando sass --watch comando.

Se preferisci gli strumenti della GUI, puoi utilizzare la mia app preferita, Codekit, uno strumento di sviluppo web per compilare Sass, concatenare, autoprefixing e molto altro. Prepros è un'altra applicazione molto capace che può essere utilizzata su tutti i sistemi. Entrambi sono domande a pagamento ma ne vale la pena se li userete a lungo termine.

Se vuoi solo provare Sass senza pagare nulla puoi usare il terminale, o Koala (ecco la nostra recensione), un'app gratuita ricca di funzionalità multipiattaforma, che può mantenere la sua posizione nei confronti delle controparti premium.

variabili

Una delle prime cose che ti serviranno per avvolgere la tua mente sono le variabili. Se provieni da un linguaggio PHP o altro linguaggio di programmazione simile, questa sarà per te una seconda natura. Le variabili sono per memorizzazione di bit e pezzi di informazioni riutilizzabili, come un valore di colore per esempio:

 $ primary_color: # 666666; .button color: $ primary_color;  .important color: $ primary_color;  

Questo potrebbe non sembrare utile qui, ma immagina di avere 3000 linee di codice. Se la tua combinazione di colori cambia devi sostituire ogni valore di colore in CSS. Con Sass puoi solo modificare il valore del $ primary_color variabile e fatto con esso.

Le variabili sono usate per memorizzando nomi di font, dimensioni, colori e una miriade di altre informazioni. Per i progetti più grandi, vale la pena estrarre tutte le variabili in un file separato (daremo un'occhiata a come è fatto presto). Ciò che ti permette di fare è ricolorare l'intero progetto e cambiare i caratteri e altri aspetti chiave senza mai toccare le attuali regole CSS. Tutto quello che devi fare è modificare alcune variabili.

annidamento

Un'altra caratteristica di base che Sass ti offre è la capacità di nidificare le regole. Supponiamo che tu stia creando un menu di navigazione. Hai un nav elemento che contiene un elenco non ordinato, voci di elenco e collegamenti. In CSS puoi fare qualcosa del genere:

 #header nav / * Regole per l'area di navigazione * / #header nav ul / * Regole per il menu * / #header nav li / * Regole per gli articoli dell'elenco * / #header nav a / * Regole per i collegamenti * / 

Nei selettori, ci stiamo ripetendo molto. Se gli elementi hanno radici comuni, possiamo usare l'annidamento per scrivi le nostre regole in un modo molto più pulito.

Ecco come potrebbe apparire il codice sopra in Sass:

 #header nav / * Regole per l'area di navigazione * / ul / * Regole per il menu * / li / * Regole per gli articoli dell'elenco * / a / * Regole per i collegamenti * / 

La nidificazione è estremamente utile perché rende i fogli di stile (molti) più leggibili. Usando la nidificazione insieme a una rientranza adeguata è possibile ottenere strutture di codice altamente leggibili, anche se hai una buona quantità di codice.

Uno svantaggio del nesting è che può farlo portare a specificità inutili. Nell'esempio sopra ho fatto riferimento ai collegamenti con #header nav a. Puoi anche usare #header nav ul li a che probabilmente sarebbe troppo.

In Sass, è molto più facile essere molto specifici poiché tutto ciò che devi fare è annidare le tue regole. Quanto segue è molto meno leggibile e abbastanza specifico.

 #header nav / * Regole per l'area di navigazione * / ul / * Regole per il menu * / li / * Regole per gli articoli dell'elenco * / a / * Regole per i collegamenti * / 

Estendere i set di regole

L'estensione sarà familiare se lavori con linguaggi orientati agli oggetti. Si capisce meglio attraverso un esempio, creiamo 3 pulsanti che sono lievi variazioni l'uno dell'altro.

 .pulsante display: blocco in linea; colore: # 000; sfondo: # 333; border-radius: 4px; imbottitura: 8px 11px;  .button-primary @extend .button; background: # 0091C2 .button-small @extend .button; font-size: 0.9em; imbottitura: 3px 8px;  

Il .button-primaria e .button-piccolo le classi tutti estendono il .pulsante classe che significa che assumono tutte le sue proprietà e poi ne definiscono le proprie.

Ciò è immensamente utile in molte situazioni in cui è possibile utilizzare le variazioni di un elemento. Messaggi (avviso / successo / errore), pulsanti (colori, dimensioni), tipi di menu e così via, tutti possono utilizzare la funzionalità di estensione per una grande efficienza CSS.

Un avvertimento di estensione è quello non funzioneranno in media query come ti aspetteresti. Questo è un po 'più avanzato ma puoi leggere tutto su questo comportamento in Understanding Segnaposti selettori - i selettori di segnaposto sono un tipo speciale di estensione di cui parleremo presto.

mixins

Le mixine sono un'altra caratteristica preferita degli utenti del preprocessore. I mixins sono set di regole riutilizzabili, perfetti per regole specifiche del fornitore o per la gestione di lunghe regole CSS.

Come creare una regola di transizione per gli elementi di passaggio del mouse:

 @mixing hover-effect -webkit-transition: background-color 200ms; -moz-transition: background-color 200ms; -o-transizione: background-color 200ms; transizione: background-color 200ms;  a @include hover-effect;  .button @include hover-effect;  

I mixin ti permettono anche di usare le variabili definire i valori all'interno del mixin. Potremmo riscrivere l'esempio di cui sopra darci il controllo sull'ora esatta della transizione. Ad esempio, potremmo volere che i pulsanti passino leggermente più lentamente.

 @mixin hover-effect ($ speed) -webkit-transition: background-color $ speed; -moz-transition: background-color $ speed; -o-transizione: background-color $ speed; transizione: background-color $ speed;  a @include hover-effect (200ms);  .button @include hover-effect (300 ms);  

Selettori segnaposto

I selettori segnaposto sono stati introdotti con Sass 3.2 e risolto un problema che potrebbe causare un po 'di rigonfiamento nel codice CSS generato. Dai un'occhiata a questo codice che crea messaggi di errore:

 .message font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solido;  .message-danger @extend .message; sfondo: # C20030; color: #fff; border-color: # A8002A;  .message-success @extend .message; sfondo: # 7EA800; color: #fff; border-color: # 6B8F00;  

È molto probabile che la classe del messaggio non verrà mai usata nel nostro HTML: lo è stata creato per essere esteso, non usato così com'è. Ciò provoca un po 'di rigonfiamento nel tuo CSS generato. Per rendere il tuo codice più efficiente, puoi utilizzare il selettore segnaposto indicato con un segno di percentuale:

 % message font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solido;  .message-danger @extend% button; sfondo: # C20030; color: #fff; border-color: # A8002A;  .message-success @extend% button; sfondo: # 7EA800; color: #fff; border-color: # 6D9700;  

A questo punto ti starai chiedendo quale sia la differenza tra estensione e mixin. Se usi segnaposti si comportano come un mixin senza parametri. Questo è vero, ma l'output in CSS è diverso. La differenza è questa mescola le regole duplicate mentre i segnaposto si assicureranno che le stesse regole condividano i selettori, con conseguente meno CSS alla fine.

operazioni

È difficile resistere al gioco di parole qui, ma per ora mi asterrò da qualsiasi barzelletta medica. Gli operatori ti permettono di fare alcuni calcoli nel tuo codice CSS e possono essere davvero utili. L'esempio nella guida di Sass è perfetto per mostrare questo:

 .contenitore larghezza: 100%;  article float: left; larghezza: 600px / 960px * 100%;  aside float: right; larghezza: 300px / 960px * 100%;  

L'esempio sopra crea un sistema di griglia basato su 960px con problemi minimi. Si compilerà bene con il seguente CSS:

 .contenitore larghezza: 100%;  article float: left; larghezza: 62,5%;  aside float: right; larghezza: 31,25%;  

Un ottimo uso che trovo per le operazioni è quello di mescolare i colori. Se dai un'occhiata al messaggio di successo di Sass sopra non è chiaro che il colore dello sfondo e del bordo abbia una sorta di relazione. Sottraendo una sfumatura di grigio possiamo scurire il colore, rendendo visibile la relazione:

 $ primario: # 7EA800; .message-success @extend% button; sfondo: $ primario; color: #fff; border-color: $ primary - # 111;  

Più chiaro è il colore sottratto, più scura sarà la tonalità risultante. Più leggero è il colore aggiunto, più chiaro è il colore risultante.

funzioni

Esistono molte funzioni da utilizzare: funzioni numeriche, funzioni stringa, funzioni elenco, funzioni colore e altro. Dai un'occhiata alla lunga lista nella documentazione per sviluppatori. Darei un'occhiata ad una coppia qui solo per mostrarti come funzionano.

Il alleggerire e scurire la funzione può essere utilizzata per modificare la luminosità di un colore. Questo è meglio che sottrarre sfumature, rende tutto ancora più modulare e ovvio. Dai un'occhiata al nostro esempio precedente usando la funzione di oscuramento.

 $ primario: # 7EA800; .message-success @extend% button; sfondo: $ primario; color: #fff; border-color: darken ($ primary, 5);  

Il secondo argomento della funzione è la percentuale di oscuramento richiesta. Tutte le funzioni hanno parametri; dai un'occhiata alla documentazione per vedere cosa sono! Ecco alcune altre funzioni di colore autoesplicative: desaturare, saturare, invertire, in scala di grigi.

Il ceil funzione, proprio come in PHP, restituisce un numero arrotondato al numero intero successivo. Questo può essere usato quando si calcola la larghezza delle colonne o se non si desidera utilizzare molte posizioni decimali nel CSS finale.

 .title font-size: ceil ($ heading_size * 1.3314);  

Panoramica

Le funzionalità di Sass ci danno un grande potere di scrivere CSS migliori con meno sforzo. L'uso corretto di mix, estensioni, funzioni e variabili renderà i nostri fogli di stile più manutenibili, più leggibili e più facili da scrivere.

Se sei interessato a un altro preprocessore CSS simile ti suggerisco di dare un'occhiata a LESS (o controlla la nostra guida per principianti) - il principio sottostante è più o meno lo stesso!