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 query
@import "filename" screen;Se nessuna delle condizioni mostrate sopra è soddisfatta, Sass importa il contenuto del file con estensione .scss o .sass e, dopo averlo processato, lo trasferisce nel file CSS creato.
Inoltre, nel caso in cui non venga specificata un’estensione, Sass proverà a trovare un file con il nome indicato e avente estensione .scss o .sass. Se riesce a recuperarlo lo importa altrimenti genera un errore.
Vediamo allora in che modo Sass estende le funzionalità della direttiva @import attraverso un esempio. Creiamo una nuova cartella avente la seguente struttura.
tree
.
├── css
├── index.html
└── scss
├── style.scss
└── buttons.scss
2 directories, 3 filesAll’interno del file index.html inseriamo il seguente frammento di codice
<!-- 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="css/style.css">
<title>Esempio Sass - direttiva @import</title>
</head>
<body>
<div class="wrapper">
<button class="btn btn--red">ok</button>
<button class="btn btn--yellow">annulla</button>
</div>
</body>
</html>Creiamo quindi due file style.scss e buttons.scss nella cartella scss all’interno dei quali inseririamo delle regole come mostrato sotto.
/* file scss/style.scss */
@import "buttons";
.wrapper {
width: 100vw;
max-width: 960px;
margin: 0 auto;
text-align: center;
}Nel file style.scss importiamo il contenuto del file buttons.scss che riportiamo in basso.
/* file scss/buttons.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;
&--red {
background-color: #f74a34;
color: #fff;
}
&--yellow {
background-color: #f7e434;
color: #333;
}
}Lanciamo quindi il seguente comando per compilare i file con estensione .scss.
node-sass scss --output-style expanded --output cssIl risultato è che due file style.css e buttons.css vengono generati nella cartella css.
tree
.
├── css
│ ├── style.css
│ └── buttons.css
├── index.html
└── scss
├── style.scss
└── buttons.scss
2 directories, 5 filesIl file buttons.css conterrà il seguente frammento di codice:
/* file style.css */
.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 {
background-color: #f74a34;
color: #fff;
}
.btn--yellow {
background-color: #f7e434;
color: #333;
}Al contrario nel file style.css verranno inserite sia le regole generate a partire dal file buttons.scss che la regola presente nel file style.scss per la classe wrapper.
/* file style.css */
.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 {
background-color: #f74a34;
color: #fff;
}
.btn--yellow {
background-color: #f7e434;
color: #333;
}
.wrapper {
width: 100vw;
max-width: 960px;
margin: 0 auto;
text-align: center;
}Molto spesso, però, i file che vengono importati contengono regole, definizioni e configurazioni di supporto che verranno eventualmente incluse in un altro file. Per questo motivo non c’è necessità di convertire anche tali file. Infatti, come abbiamo già mostrato nell’esempio precedente, anche il file buttons.scss veniva compilato e veniva generato il rispettivo file buttons.css che in realtà non utilizziamo perché abbiamo importato le regole in esso definite all’interno del file style.css. Possiamo fare in modo che il compilatore trascuri determinati file anteponendo il carattere ‘_’ (underscore) prima del nome del file. Nel caso visto in precedenza, buttons.scss verrebbe rinominato _buttons.scss. In questo modo, dopo aver importato tale file in style.scss (@import “buttons”; senza carattere underscore) e aver lanciato il comando node-sass, verrà generato solo il file style.css come mostrato sotto.
tree
.
├── css
│ └── style.css
├── index.html
└── scss
├── _buttons.scss
└── style.scss
2 directories, 4 filesIl file style.css conterrà lo stesso frammento di codice riportato nell’esempio appena illustrato.
Ricapitolando tutti i file il cui nome è preceduto dal carattere ‘_’ non vengono direttamente convertiti dal transpiler, ma possono essere inclusi in altri file grazie alla direttiva @import. Tali file prendono il nome di partial.
