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>
<div class="container">
<p>Ciao</p>
</div>
</body>
</html>All’interno del file style.scss inseriamo il codice riportato sotto.
/* file style.scss */
$primary-color: #c69;
$text-color: white;
.container {
width: 200px;
height: 150px;
line-height: 150px;
text-align: center;
background-color: $primary-color;
border-radius: 8px;
p {
font-size: 2em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: $text-color;
}
}Per il momento non ci soffermiamo sulla sintassi, che approfondiremo nelle prossime lezioni. È però facile intuire che abbiamo usato due variabili dichiarate all’inizio del file. Per capire qual è invece il significato della regola per il paragrafo, inserita all’interno della regola per gli elementi della classe container, basta lanciare il comando mostato sotto con il quale generiamo il file style.css che abbiamo importato nel file HTML.
Anche per ragioni di prestazioni è opportuno compilare i file con estensione .scss e generare i rispettivi file .css. Saranno infatti questi ultimi a essere inseriti all’interno dei file HTML.
node-sass style.scss > style.cssIl comando node-sass si limita a convertire in CSS il file style.scss e a mostrare il risultato a video. Per questo motivo chiediamo di redirigere lo standard output (>) del comando sul file style.css che conterrà il frammento di codice riportato sotto.
/* file style.css */
.container {
width: 200px;
height: 150px;
line-height: 150px;
text-align: center;
background-color: #c69;
border-radius: 8px;
}
.container p {
font-size: 2em;
font-family: 'Lato', Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
}In alternativa possiamo semplicemente specificare il nome del file CSS come secondo argomento.
node-sass style.scss style.css
Rendering Complete, saving .css file...
Wrote CSS to /Users/claudio/esempio_sass/style.cssLe due sintassi disponibili in Sass
Nell’esempio appena visto abbiamo creato un file con estensione .scss che abbiamo poi convertito in normale codice CSS. In realtà, però, Sass mette a disposizione due diversi tipi di sintassi.
SCSS (o Sassy CSS)
La prima è quella appena vista che è simile al linguaggio CSS. Infatti, ogni foglio di stile creato in CSS contiene del codice che possiamo tranquillamente riusare nei file .scss all’interno dei quali abbiamo però a disposizione diverse funzionalità che non sono presenti nel linguaggio CSS. Questo primo tipo di sintassi prende il nome di SCSS (Sassy CSS)
SASS
Esiste poi un altro tipo di sintassi, nota come sintassi indentata, che fornisce un modo più conciso di scrivere i file Sass. Per esempio si usa l’indentazione al posto delle parentesi e, per separare le varie dichiarazioni, il punto e virgola viene sostituito semplicemente dal ritorno a capo. In quest’ultimo caso creeremo dei file con estensione .sass al posto dei file con estensione .scss.
L’esempio visto in precedenza può quindi essere riscritto utilizzando la sintassi appena descritta.
/* file style.sass */
$primary-color: #c69
$text-color: white
.container
width: 200px
height: 150px
line-height: 150px
text-align: center
background-color: $primary-color
border-radius: 8px
p
font-size: 2em
font-family: Arial, Helvetica, sans-serif
font-weight: bold
color: $text-color
Al contrario di node-sass (che non permette di trasformare un file .sass in formato SCSS e viceversa), installando Ruby Sass (gem install sass), abbiamo la possibilità di lanciare il comando sass-convert che, come è possibile intuire, consente di convertire Sass in SCSS e viceversa.
# conversione Sass -> SCSS
sass-convert style.sass style.scss
# Conversione SCSS -> Sass
sass-convert style.scss style.sassConclusioni
In questa lezione abbiamo visto come compilare un file .scss in CSS via linea di comando. Abbiamo anche accennato alla sintassi .sass precisando, però, che il compilatore node-sass non la supporta. Nella prossima lezione inizieremo a vedere alcuni metodi alternativi per compilare i file con estensione .scss ripartendo dal comando node-sass di cui vedremo alcune delle opzioni più interessanti.
