CSS moderno con Sass - tutorial pratico

Grazie ai pre-processori CSS è possibile scrivere CSS in modo decisamente più efficace. Cosa sono questi pre-processori, quali esistono e perché la scelta in questa serie è caduta su Sass, viene mostrato in questo video.

Prima di poter utilizzare Sass, è necessario installarlo. E il requisito per questo è Ruby. Entrambi - quindi l'installazione di Ruby e Sass - vengono mostrati in questo video. Successivamente potrete subito verificare se l'installazione di Sass è effettivamente riuscita.

I sass devono essere convertiti in file CSS affinché diventino effettivamente utilizzabili. Grazie al comando Watch, è possibile rilevare facilmente le modifiche ai singoli file o all'interno di intere directory.

Con @import è possibile importare e unire file SCSS. Quello che ha a che fare con un trattino basso aggiunto al nome del file è uno degli aspetti di questo video.

In Sass esiste la possibilità di dichiarare variabili. Questo concetto non è disponibile nell'CSS tradizionale, ma in Sass è un geniale strumento per lo sviluppo efficace di fogli di stile.

Grazie al nesting, è possibile mantenere la sintassi di Sass significativamente più snella rispetto a quanto sia usuale in CSS. Inoltre, l'annidamento vi aiuta a scrivere il codice in modo molto più ordinato.

L'uso di @extend vi permette di passare un insieme di proprietà CSS da un selettore a un altro. Ciò aiuta anche a mantenere snelli i file Sass.

Il selettore del segnaposto consente la definizione di moduli. Questa modularizzazione permette di suddividere la sintassi Sass in blocchi logici che possono essere inclusi in diverse parti.

I mixin sono funzioni con cui è possibile semplificare notevolmente i processi di lavoro, ad esempio. In questo video verrà mostrato come definire i propri mixin e infine come applicarli.

Con il selettore di cui si parla in questo video, è possibile accedere all'elemento genitore di un elemento. Questo selettore non esiste notoriamente in CSS e quindi offre un enorme valore aggiunto.

Sass permette l'uso di cicli For. Ciò funziona molto facilmente in Sass e può essere utilizzato ad esempio per la definizione di un proprio sistema di griglia.

Oltre a For, in Sass è possibile utilizzare anche cicli Each e While. Come utilizzarli per l'automazione è mostrato in questo video.

In linguaggi come PHP e JavaScript c'è la possibilità di reagire a eventi diversi usando if e else. Questa possibilità esiste effettivamente anche in Sass. Come è possibile farlo vedere questo video.

Potete calcolare in Sass. Ad esempio, questo è pratico per definire le dimensioni dei caratteri. Grazie agli operatori appropriati, è possibile costruire il proprio sistema di griglie completamente individuale.

Naturalmente, è possibile definire i colori in Sass. Ma Sass va anche molto oltre nel campo rispetto al tradizionale CSS. Grazie alle funzioni appropriate, ad esempio, è possibile manipolare facilmente i colori.

Il framework Compass amplia ulteriormente le possibilità di Sass. Questo primo video mostra come potete installare e utilizzare Compass.

Il sito web del progetto Compass è lo strumento informativo centrale quando si tratta di lavorare con questo framework. Vi mostrerò come potete lavorare con la documentazione basata sulle caratteristiche di CSS3 di Compass.

Un esempio mostra quanto sia facile realizzare le cose con Compass. Alla fine di questa serie verrà anche dato uno sguardo a un framework Sass alternativo. Susy offre un sistema di griglie leggero.