Potresti aver sentito parlare della preelaborazione CSS e ti starai chiedendo di cosa si tratti. Potresti averne sentito parlare insolenza o DI MENO .

In breve, la preelaborazione del CSS consente di scrivere fogli di stile più concisi che sono formattati in modo appropriato e richiedono tecniche meno ripetitive che si trovano comunemente durante la scrittura del codice CSS. Il risultato è uno stile più dinamico e una notevole quantità di tempo risparmiato nello sviluppo di siti Web o applicazioni.

Se scrivi già CSS, puoi facilmente imparare a preelaborare il tuo CSS. Una volta compreso lo scopo di Sass, ti chiederai perché non sei passato prima.

In che modo Sass è diverso dai CSS?

Sass sembra simile al CSS ma ha le sue ovvie differenze una volta che ci si immerge. Ci sono due modi per scrivere Sass e in definitiva dipende da te quale stile preferisci. Io uso lo stile indentato e tra parentesi (.scss) nei miei progetti perché mi piace visualizzare realmente dove finisce un blocco e inizia quando un sacco di codice diventa nidificato. Una volta elaborato, il codice Sass viene compilato automaticamente nel CSS tradizionale utilizzando un motore di pre-elaborazione.

Sono disponibili molte app che consentono di precompilare il tuo Sass in modo semplice e senza problemi. Per installare, puoi usare la riga di comando finché Ruby è installato sul tuo computer. Se non ti senti a tuo agio con la riga di comando, ci sono altre opzioni (più su questo sotto) e se questo è sopra la tua testa, visita Sass-lang.com per imparare come farlo in un facile formato passo-passo. Alla fine, usando qualsiasi metodo sia a riga di comando o app, l'installazione di Sass guarderà le tue modifiche e automaticamente compilerà per te il CSS tradizionale.

Consiglio vivamente l'uso di app come Codekit , LiveReload , o Miscela che ti aiutano a configurare un progetto Sass su un Mac da zero o se sei un utente Windows che consiglio PrePros . Codekit, la mia scelta del preprocessore, mi aiuta a preelaborare il mio Sass e a convalidare e minimizzare il codice per consentire al tuo sito Web di funzionare in modo rapido ed efficace. (La capacità di creare Bussola o Bourbon Anche i progetti basati su Codekit sono una caratteristica eccezionale ma vanno oltre lo scopo di questo articolo.) Dopo esserti sentito più a tuo agio con Sass, assicurati di controllare come utilizzare Compass e Bourbon nei tuoi progetti Sass.

Allora, cos'è Sass?

Sass è l'acronimo di Stylesheet di Syntactic Awesome ed è stato creato da Hampton Catlin . Sass introduce nuovi concetti come variabili, mixin e nesting nel codice CSS che già conosci e ami. Alla fine questi concetti rendono il tuo CSS fantastico, più facile da scrivere e più dinamico. Tutte queste funzionalità combinate, velocizzano il flusso di lavoro di qualsiasi designer o sviluppatore.

Ciò che comunemente confonde le persone è il modo alternativo di scrivere Sass. Vedrai altri tutorial o spiegazioni di Sass usando l'estensione .SCSS o .Sass per i loro file Sass. Questo è evidente perché ci sono due modi per scrivere il codice che produce lo stesso output. Il più comune che ho visto, e il metodo che uso attualmente è la versione a parentesi nota come .SCSS. Un altro metodo è l'estensione .Sass che si basa più su indentazione piuttosto che su elementi puntuali ed è dipendente dallo spazio bianco. Con questa sintassi non c'è bisogno di punti e virgola come si vede nei CSS e nella sintassi .SCSS.

Guarda l'esempio qui sotto.

.CSS

#container {width:960px;margin:0 auto;}#container p {color: black;}

.SCSS

/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}

.Sass

/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$black

Struttura

Okay, quindi probabilmente ti starai chiedendo come ottenere l'installazione di Sass per i tuoi progetti. Il processo è abbastanza semplice, specialmente se usi Codekit o un'applicazione simile per aiutarti lungo il percorso.

Una tipica struttura di file di un progetto Sass assomiglia al profilo sottostante. Questo può sembrare scoraggiante, ma ti prometto che il tuo flusso di lavoro migliorerà una volta che avrai capito come funzionano le cose insieme. Alla fine tutto il tuo Sass viene compilato in un unico file CSS che sarà il file che includi nei tuoi documenti di lavoro sia HTML, PHP, ecc ...

stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.

In definitiva, il modo in cui imposti la tua struttura dipende da te. Inizia con una struttura di base e affina le tue esigenze e il tuo flusso di lavoro.

@Importare

Sass estende la regola CSS @ import per consentirgli di importare i file Sass e SCSS. Tutti i file importati vengono uniti in un singolo file CSS generato. Inoltre, tutte le variabili o i mixini definiti nei file importati vengono trasferiti nel file principale, il che significa che puoi virtualmente mischiare e abbinare qualsiasi file e accertarti che tutti i tuoi stili rimarranno a livello globale.

@import accetta un nome file da importare. Come ultima risorsa, i file Sass o SCSS verranno importati tramite il nome del file scelto. Se non ci sono estensioni, Sass cercherà di trovare un file con quel nome e l'estensione .scss o .Sass e lo importerà.

Se hai una configurazione tipica del progetto Sass, noterai alcune regole @import all'interno di un file di base. Ciò consente semplicemente di avere più file che si sincronizzano efficacemente una volta compilati, ad esempio:

@import "main.scss";

o:

@import "main";@Partials

Se si dispone di un file SCSS o Sass che si desidera importare ma non compilare in CSS, è possibile aggiungere un trattino basso all'inizio del nome del file, altrimenti noto come parziale. Mentre il codice si sta compilando, Sass ignorerà i partial durante l'elaborazione in CSS. Ad esempio, potresti avere _buttons.scss, nessun file _buttons.css verrebbe creato e puoi quindi @importare "pulsanti";

La migliore pratica è quella di creare una directory dei partial e posizionare tutti i file Sass parziali al suo interno. In questo modo non avrai nessun nome di file duplicato che Sass non consentirà, ad esempio, il partial _buttons.scss e il file buttons.scss non possono esistere nella stessa directory. Usare partial è un ottimo modo per rimanere organizzati a livello globale. Finché @ importa il file, il Sass che scrivi è utilizzabile per l'intero progetto. Tipicamente all'interno dei partial creo mixin o variabili da utilizzare nel mio progetto. Li chiamo in base al loro contenuto e agli elementi che stanno disegnando.

variabili

Le variabili nei CSS sono un'innovazione nel moderno sviluppo web. Con Sass puoi creare variabili per cose come font, colori, dimensioni, margini, padding, ecc ... La lista è infinita. Se scrivi JavaScript o PHP, il concetto è abbastanza simile in termini di definizione di variabili e convenzioni.

Allora perché usare le variabili? Facile, le variabili ti permettono di usare un elemento più di una volta, simile a una classe in HTML o una variabile in JavaScript. Ad esempio, supponiamo di definire più div con uno specifico colore di sfondo. Puoi usare la variabile che è più facile da ricordare al posto del tradizionale codice esadecimale o del calcolo RGB. Creare una variabile con un nome facile da ricordare consente meno copia e incolla e un flusso di lavoro più produttivo. Lo stesso concetto si applica ogni volta che una variabile può essere implementata, e con Sass praticamente ovunque, per esempio questo .scss:

#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}

risulterà in questo file .css:

#container {font-size: 12px;padding: 10px;color: #C0392B;}

Operazioni e funzioni

La parte interessante delle variabili è che sono estremamente simili a quelle usate nei linguaggi di scripting. Le variabili all'interno di Sass possono essere utilizzate all'interno di entrambe le operazioni e funzioni. Le operazioni matematiche standard (+, -, *, / e%) sono supportate per i numeri. Per i colori ci sono funzioni integrate in Sass che hanno come obiettivo la luminosità, la tonalità, la saturazione e altro.

Avere questa funzionalità rende il tuo codice più dinamico che mai. Ad esempio, se si desidera modificare il colore del collegamento generale del sito, è sufficiente modificare la variabile, ricompilare e il sito verrà aggiornato dinamicamente. Guarda un altro esempio qui sotto per un elenco di navigazione riutilizzabile, questo .scss:

nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);}  }} 

risulterà in questo .css:

nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}

annidamento

La nidificazione è un'enorme ragione per cui amo Sass. Alla fine scrivi meno righe di codice e tutto il tuo codice è facile da leggere a causa della formattazione nidificata. (Lo stesso concetto di nidificazione si trova anche in MENO).

Esistono due tipi di nidificazione:

Nidificazione selettore

Il nidificazione dei selettori in Sass è simile a come si nidificherà l'HTML:

Main Content
Sidebar Content

La versione di nidificazione di Sass:

#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}

comporterebbe il seguente CSS:

#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}

Nidificazione di proprietà

Il secondo tipo di nidificazione è la nidificazione delle proprietà. È possibile nidificare le proprietà con lo stesso prefisso per definire meglio gli elementi di destinazione, il che si traduce in una minore quantità di righe di codice, ad esempio:

#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}

risulterebbe in questo CSS:

#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}

mixins

Di tutte le caratteristiche di Sass i Mixin devono essere i più potenti. Le mixine sono simili a una variabile ma su steroidi. Puoi definire uno stile completo di un elemento e riutilizzare quegli stili nel tuo progetto.

I mix sono definiti usando la direttiva @mixin , che prende un blocco di stili che hai creato prima e lo applica al selettore di tua scelta usando la direttiva @include . Di seguito è riportato un modello CSS comune utilizzato per creare un menu di navigazione orizzontale. Invece di scrivere lo stesso codice per ogni istanza di navigazione, basta usare un mixin e successivamente includerlo dove necessario. Questo concetto può essere fatto per qualsiasi cosa tu usi più volte, come pulsanti, tipografia, sfumature, ecc ...

/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}

E qui includiamo il mixin con una riga di codice:

ul.navbar {@include navigate;}

che risulta in questo CSS compilato:

ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}

Puoi persino arrivare a creare mixaggi personalizzabili che usano gli argomenti per aggiornare dinamicamente. Oltre a questo puoi includere mixin all'interno di altri mixin o creare funzioni usando mixin e altro. Il potere dietro a questi è assolutamente enorme.

Esistono alcune popolari raccolte di mixin predefinite in cui ho già parlato di Compass e Bourbon. Con una semplice @import nel tuo progetto puoi avere accesso a mixaggi già generati comunemente usati nel web. Ci sono così tante opzioni che è difficile coprire tutto disponibile ma è sicuramente divertente sperimentare e sporcarsi le mani sviluppando animazioni o transizioni personalizzate con poche righe di codice piuttosto che uno schermo pieno. I missaggi rendono lo sviluppo di più browser un gioco da ragazzi se non hai voglia di digitare i prefissi definiti dal browser più e più volte all'interno del tuo CSS.

Ad esempio, qui creiamo un mixin con argomenti che consentono di personalizzarlo.

@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }

che ci dà questo CSS quando è compilato:

p {border-color: blue;border-width: lin;border-style: dashed;}

Sommario

Mentre Sass ha una curva di apprendimento, credo davvero che una volta compresi i metodi e la sintassi, non vorrai mai più tornare a scrivere CSS standard.

Sass è estremamente potente e ho solo coperto le basi qui. Con il CSS tradizionale, abbiamo tutti incontrato la copia e incolla o trovare e sostituire attività che perdono così tanto tempo nella fase di sviluppo del progetto. Fai una prova a Sass e scopri come costruire un flusso di lavoro efficace nei tuoi progetti futuri.

Usi Sass o preferisci un diverso preprocessore CSS? Hai un mixin preferito? Fateci sapere nei commenti.

Immagine in primo piano / miniatura, utilizza l' immagine da zero a eroe via Shutterstock.