Importazione @import e Partials Sass

Sass può mantenere il codice CSS asciutto (DRY，Don't Repeat Yourself，non ripetere te stesso).

Un modo per scrivere codice DRY è salvare il codice correlato in file separati.

Puoi utilizzare frammenti CSS per creare file piccoli e includerli in altri file Sass. Ad esempio, questi file possono essere: file di reset, variabili, colori, font, ecc.

Importazione di file Sass

Come CSS, Sass supporta anche @import Il comando.

@import Il comando ti permette di includere il contenuto di un file in un altro file.

Per problemi di prestazioni, CSS @import Il comando ha un principale svantaggio; ogni volta che viene chiamato, crea una chiamata HTTP aggiuntiva. Tuttavia, Sass @import Il comando include il file nel CSS; quindi non è necessario effettuare ulteriori chiamate HTTP durante l'esecuzione!

Sintassi di importazione Sass:

@import filename;

Suggerimento:Non è necessario specificare l'estensione del file, Sass assume automaticamente che tu stia riferendoti a file .sass o .scss. Puoi anche importare file CSS.@import Il comando di importazione di file, poi puoi utilizzare qualsiasi variabile o mixin definita nel file importato nel file principale.

Puoi importare un numero illimitato di file nel file principale:

Esempio

@import "variables";
@import "colors";
@import "reset";

Vediamo un esempio: supponiamo di avere un file di reset chiamato "reset.scss", che ha questo aspetto:

Sintassi SCSS (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

Ora dobbiamo importare il file "reset.scss" in un altro file chiamato "standard.scss".

Facciamo così: di solito aggiungiamo in alto nel file. @import Comando; in questo modo il suo contenuto avrà un'area di applicazione globale:

Sintassi SCSS (standard.scss):

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Quindi, quando il file "standard.css" viene tradotto, il CSS sarà come segue:

Output CSS:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials (file locali)

Per impostazione predefinita, Sass traduce direttamente tutti i file .scss. Tuttavia, quando si importano file, non è necessario che vengano tradotti direttamente.

Sass ha un meccanismo: se inizi il nome del file con un underscore, Sass non lo tradurrà. I file denominati in questo modo sono chiamati partials in Sass.

Di conseguenza, i file partial Sass devono essere denominati con l'underscore iniziale:

Sintassi di Partial Sass:

_filename;

Esempio di file partial Sass chiamato "_colors.scss". (Questo file non verrà convertito direttamente in "colors.css"):

Esempio

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

Ora, se importi questo file partial, puoi omettere la sottolineatura. Sass intende importare il file "_colors.scss":

Esempio

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}