Guida SASS
Cos’è e come installare SASS?
In questa guida introduttiva, parleremo di uno dei pre-processori CSS più usati e apprezzati, ovvero Sass. Nel corso delle prossime lezioni illustreremo alcuni dei concetti fondamentali per poter iniziare a utilizzare Sass. Useremo la versione 3.5.4 di LibSass attraverso il wrapper node-sass che installeremo tramite NPM.
Per un riepilogo della sintassi e della terminologia tipica del linguaggio CSS è possibile...
Convertire un file .scss in CSS
Vediamo, in questa lezione, un primo semplice esempiodi utilizzo del comando node-sass.
All'interno di una nuova cartella creiamo due file: index.html e
style.scss. Al file HTML assegnamo questo contenuto:
<!-- file index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Esempio - node-sass</title>
</head>
<body>
...
Diversi modi per compilare Sass
In questa lezione vedremo come usare alcune delle opzioni disponibili in node-sass per
configurare la compilazione dei file con estensione .scss. Illustreremo poi un
metodo alternativo per procedere alla compilazione che può risultare più vantaggioso specie se
si lavora su progetti di grandi dimensioni. Vedremo infatti, almeno superficialmente, come configurare
Gulp.
Infine accenneremo...
Commenti al codice in Sass
Dopo le prime lezioni introduttive iniziamo a vedere più da vicino quali sono gli strumenti forniti da Sass
che permettono di generare dei fogli di stile in maniera più efficiente e produttiva. Per prima cosa vediamo come è possibile
inserire commenti al codice in Sass.
I commenti in Sass
Sass supporta due diversi tipi di sintassi per...
Sass: Variabili e Tipi di dato
Sass estende il linguaggio CSS attraverso una serie di funzionalità e costrutti che costituiscono
un semplice linguaggio scripting il quale prende il nome di Sass Script. Quest'ultimo consente di
utilizzare appunto variabili, operatori, funzioni e altri costrutti sintattici che vengono poi interpretati
dal transpiler (compilatore che trasforma il codice sorgente scritto in un linguaggio in un...
Sass: operazioni su stringhe, numeri e colori
Nella precedente lezione abbiamo introdotto le variabili in Sass. In questa lezione vedremo come
effettuare operazioni con le variabili.
Operazioni su stringhe
L'unica operazione consentita sulle stringhe è la concatenazione come mostrato nell'esempio riportato
sotto.
/* file style.scss */
$a: "hello ";
$b: "world";
span::before {
content: $a + $b + '!'
}
Dal frammento di codice riportato sopra verrà generato il seguente file.
/*...
Sass: cicli e istruzioni condizionali
Al contrario di altri preprocessori CSS, Sass mette a disposizione alcuni costrutti di controllo come i cicli e le istruzioni condizionali che consentono di generare delle regole in maniera dinamica o di includere nei fogli di stile certi blocchi di dichiarazioni a seconda che siano soddisfatte o meno determinate condizioni.
Istruzioni condizionali
In Sass è possibile inserire in una regola dei...
Sass: regole annidate
In questa e nelle prossime lezioni vedremo alcuni metodi per organizzare al meglio i fogli di stile attraverso gli strumenti forniti da Sass. Grazie infatti alle regole annidate, alla direttiva @import e ai partial, alla direttiva
@extend e ai placeholder possiamo strutturare in maniera più efficiente il codice.
Regole annidate
Iniziamo a parlare delle regole annidate che funzionano allo stesso...
Sass: la direttiva @import
In Sass è presente la direttiva @import che si comporta come la direttiva standard
del linguaggio CSS solo in alcuni casi particolari che riportiamo nel frammento di codice sottostante.
/* file style.scss */
// specificando l'estensione .css
@import "filename.css";
// se viene specificato il protocollo come http:// o https://
@import https://esempio.tld/filename.css;
// viene usata la funzione url()
@import url(filename);
// la direttiva @import include una media...
Sass: la direttiva @extend e i placeholder
La direttiva @extend di Sass permette di ereditare blocchi di dichiarazioni da regole già esistenti
come mostrato nell'esempio sottostante:
/* file style.scss */
.btn {
text-transform: uppercase;
border-radius: 3px;
box-shadow: 0 3px 6px rgba(0,0,0,0.18);
padding: 8px 12px;
border: none;
font-size: 12px;
width: 100px;
}
.btn--red {
@extend .btn;
background-color: #f74a34;
color: #fff;
}
.btn--blue...
Strumenti per il debugging in Sass: sourcemap
Sass è uno strumento che fornisce un gran numero di funzionalità, ma possono sorgere alcune difficoltà
in fase di debugging, specialmente quando si utilizzano vari file che vengono importati con la direttiva
@import.
Aprendo gli strumenti per sviluppatori di un browser come Google Chrome e ispezionando le regole applicate
a un certo...
Sass: mixin e la direttiva @content
Finora abbiamo illustrato varie funzionalità presenti in Sass e abbiamo potuto apprezzare in che modo
Sass permetta di generare dei fogli di stile in maniera più efficiente. In questa lezione parleremo
invece dei mixin e vedremo come crearli e usarli per rendere il codice riutilizzabile.
Cosa sono e perché usare i mixin in Sass
I mixin in Sass costituiscono...
Le funzioni in Sass
Dopo aver spiegato cosa sono, come creare e utilizzare un mixin, vediamo ora come definire e invocare una funzione in Sass. Mostreremo poi alcune delle funzioni predefinite più utili. Le funzioni costituiscono infatti un altro metodo per non ripetere più volte lo stesso frammento di codice, evitando così di perdere tempo a riscrivere più volte la stessa istruzione e...
Risorse utili per Sass
In quest'ultima breve lezione elencheremo brevemente alcune utili risorse da poter usare in Sass.
Partiamo illustrando delle funzionalità di
Bourbon il quale
fornisce una serie di variabili, funzioni e mixin che possono risultare utili e semplificare
la fase di sviluppo. Vediamo dunque alcuni esempi.
Bourbon.io: una libreria di variabili, funzioni e mixin
Bourbon offre diverse variabili,...