Ormai sono sicuro che hai sentito parlare di Sass e di come "Hai davvero bisogno di iniziare a usarlo!"
Imparare un nuovo strumento può far schifo e trovare il tempo per farlo è quasi impossibile, ma a volte arriva uno strumento che cambia il nostro settore ed è troppo buono per essere ignorato.
Man mano che le nostre pagine web e le nostre app diventano più complesse, i nostri fogli di stile diventano più grandi e difficili da mantenere. I preprocessori CSS come Sass aiutano a mantenere concisi i nostri fogli di stile e ci permettono di modulare il nostro codice offrendo al contempo un'ampia gamma di funzioni non ancora disponibili nei normali CSS.
Queste funzionalità extra li rendono anche molto divertenti da usare! Ora potresti aver visto qualcosa che assomiglia a questo:
$i: 6;@while $i > 0 {.item-#{$i} {width: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
e ho pensato: "Whatttttttttttt? Grazie, ma terrò il mio normale "CSS".
Lo ammetto, sembra scoraggiante e alcune persone stanno facendo qualcosa di veramente pazzo, roba complessa con Sass ma sono qui per dirti che chiunque può iniziare a usarlo e i guadagni che ottieni il primo giorno ti renderanno un Sass che crede.
Ottenere Sass impostato per un progetto è un po 'oltre lo scopo di questo articolo, ma l'installazione è relativamente facile e il sito Web di Sass ha Istruzioni per Linux, Mac o PC. La cosa interessante è che, una volta installato, puoi prendere qualsiasi file CSS che hai e rinominarlo .scss rendendolo un file Sass.
Tutti i CSS formattati correttamente sono validi Sass!
Ciò significa che puoi iniziare a usare Sass continuando a scrivere i tuoi stili come sempre, incorporando lentamente più funzioni man mano che il livello di comfort aumenta. È giusto gente, solo lo stesso vecchio. stesso vecchio ma qui ci sono cinque fantastici guadagni che ora hai a tua disposizione:
Qual è il colore dell'intestazione principale di nuovo? Come scrivo quel font-stack? Quante volte hai scritto CSS e hai dovuto cercare tra i tuoi stili precedenti per un valore o aver dovuto scomporre il contagocce, ancora una volta, per scoprire quel colore esadecimale?
Sass fornisce le variabili come un modo per archiviare le informazioni che si desidera riutilizzare in tutto il foglio di stile. Ora puoi memorizzare quel valore di colore o lo stack di caratteri lunghi come qualcosa di facile da ricordare. Il modo in cui dichiari una variabile è con un segno di dollaro $ seguito dal nome. Questo nome può essere qualunque cosa tu voglia che sia. Quindi si digita un colon : seguito dal valore e da un punto e virgola ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Ora se vuoi usare uno di questi valori puoi semplicemente usare la variabile.
.mySelector { font-family: $mainFont; color: $mainColor; }
Fantastico, vero? Questa sola caratteristica, ne vale la pena l'installazione in quanto consente di risparmiare così tanto tempo durante la creazione di CSS. È così grande che probabilmente entrerà nel CSS spec ma chissà quando saremo in grado di usarlo? Fortunatamente per noi, con Sass, non dobbiamo aspettare.
Ora potresti dire a te stesso "CSS ha @import, non è bello" e avresti ragione ma le versioni CSS e Sass differiscono in modo significativo. In normali CSS @import richiama altri fogli di stile, ma lo fa facendo un'altra richiesta HTTP, qualcosa che di solito vogliamo evitare. Per questo motivo potresti non aver nemmeno usato @import prima. Sass, d'altra parte, è un preprocessore (enfasi sul pre) che inserirà quel file prima che compili il CSS.
Il risultato è una pagina CSS gestita da una richiesta HTTP. Ciò significa che puoi suddividere il tuo css in blocchi più piccoli e più manutenibili, pur continuando a offrire una sola pagina al browser. Hai bisogno di correggere il testo sul pulsante? Basta sfogliare i fogli di stile alla ricerca degli stili dei pulsanti pertinenti. Basta aprire il pulsante parziale e apportare le modifiche.
Cos'è un parziale? Proprio come suonano. Sono file Sass parziali che contengono piccoli snippet di CSS che puoi includere in altri file Sass. Sono nominati usando un trattino basso principale seguito da un nome. _myFile.scss . Il trattino basso consente a Sass di sapere che il file è solo un file parziale e che non dovrebbe essere compilato in CSS. Per importare questo partial devi solo aggiungere @import al tuo file in questo modo:
@import 'partials/myPartial';
Quindi sto importando _myPartial.scss che si trova in una cartella denominata partial. Non è necessario includere il carattere di sottolineatura o l'estensione del file. Sass è abbastanza intelligente da sapere quale file intendi. L'uso di partial ci consente un ottimo modo per modulare il nostro codice, rendendolo più portatile e più facile da mantenere.
Sass porta le funzioni alla festa dei CSS. So che non tutti sono programmatori e il concetto di una funzione può essere un po 'troppo alto sulla tua testa, ma non preoccuparti, molti aggiungono un sacco di funzioni utili pur non essendo eccessivamente complicati. Per quanto riguarda i colori, ce ne sono alcuni utili per manipolarli, ma tre si distinguono come guadagni fantastici e facili per le persone appena iniziate. Diamo un'occhiata a come li usiamo.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
La sintassi è abbastanza semplice. Nelle tre funzioni in alto vedete che abbiamo due argomenti per ciascuno. Il primo è il colore che vogliamo manipolare. Questo può essere un esadecimale, RGB o qualsiasi formato di colore che sia proprio CSS. Può anche essere una variabile. Il secondo è la quantità di cui vogliamo modificare quel colore. Rendi il 10% più scuro, schiarisci del 5%, imposta l'alfa su 0.6. Il risultato di questa funzione è il valore impostato nel CSS compilato. Quindi in basso vedi le nostre funzioni al lavoro
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}Spero che tu possa già vedere come potrebbe essere utile. Ci sono una dozzina di modi per utilizzare queste tre funzioni per aggiungere un bel contrasto di colori e possono essere utilizzati ovunque il valore del colore dovrebbe normalmente andare. Questi tre sono solo la punta dell'iceberg. Ci sono molte più funzioni di colore e molti modi creativi che possono essere utilizzati.
Alcune cose nei CSS sono un po 'noiose da scrivere. I mixins creano gruppi di dichiarazioni CSS che possiamo riutilizzare nel nostro sito. Gli stili CSS3 che richiedono i prefissi dei fornitori sono un esempio perfetto di quando utilizzare un mixin. Invece di digitare la stessa proprietà più e più volte, scriviamo un mixin una volta e poi chiamiamo quel mixin ogni volta che vogliamo usarlo. Per dichiarare un mixin usiamo il @mixin parola chiave. Diamo quindi un nome e applichiamo i nostri stili tra parentesi graffe in questo modo: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Gli argomenti possono anche essere passati al mixin per renderlo più flessibile. Per usare il nostro mixin usiamo solo il @include parola chiave.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Come vedi nell'esempio sopra, chiamiamo il nostro mixin con il @include seguito dal nome del mixin quindi qualsiasi argomento tra parentesi. Pensa a quanto tempo questo ti salverà. Perché non tutti usano questo?
Questi strumenti sono stati fantastici ma ho salvato il meglio per ultimo. @extend è una delle funzionalità più utili che ci consente di condividere un set di proprietà CSS da un selettore all'altro. Pensa a un paio di pulsanti, come ad esempio un pulsante accetta e rifiuta in una finestra modale. Poiché sono entrambi pulsanti, probabilmente condivideranno la maggior parte dello stesso stile, ma il pulsante di riduzione avrà uno sfondo rosso per farlo risaltare. Con Sass scriviamo gli stili predefiniti per tutti i pulsanti, quindi "estendiamo" questi stili al pulsante di rifiuto in cui aggiungeremo lo sfondo rosso.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Amico, quanto è fantastico non dover ripetere te stesso? Ciò non solo promuove la modularizzazione dei nostri stili, ma riduce il rischio che gli stili siano disattivati da pulsante a pulsante. Questo è un tempo enorme per risparmiare! Moltiplichiamo questo per tutti gli stili del sito e abbiamo un intervallo di tempo significativamente ridotto per scrivere CSS.
Diamine, con tutto il tempo che stiamo risparmiando forse potremmo imparare gli aspetti più complessi di Sass.
Spero di averti convinto a dare a questo fantastico strumento un'iniziativa e illustrato alcune funzionalità che potrebbero migliorare la tua produttività immediatamente. La verità è che potrei scrivere di nuovo questo articolo domani e avere altre cinque caratteristiche davvero belle da condividere. È semplicemente fantastico! Sass (e altri preprocessori) sono qui per restare così fai un favore a te stesso e inizia a usarlo. Per chi è interessato a scoprire di più, guarda queste risorse su Twitter e sul Web:
twit:
Webs:
E se ti trovi nella zona della Tri-contea della Florida del Sud, vieni con noi al Meetup South Florida Sass .