Import en Sass

Sass permet de diviser votre code afin de l'alléger. La fonction @import prendra le fichier que vous voulez importer et le combinera avec le fichier que vous importez afin que vous puissiez servir un seul fichier CSS au navigateur Web.

Disons que vous avez un couple de fichiers Sass, _import.scss et profil.scss. Nous voulons importer _import.scss dans profil.scss.

// Fichier : _import.scss
html, body, ul, ol {
  margin:  0;
  padding: 0;
}

// Fichier : profil.scss
@import 'import';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Notez que nous utilisons @import 'import'; dans le fichier profil.scss. Lorsque vous importez un fichier, vous n'avez pas besoin d'inclure l'extension de fichier .scss. Sass est intelligent et le comprendra pour vous. Lorsque vous générez le CSS, vous obtiendrez ceci :

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

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}