Partiels et importation

Importation

L’utilisation de @import vous permet de diviser vos fichiers en plusieurs fichiers plus petits. Cela a du sens, car vous pouvez conserver une meilleure structure pour vos feuilles de style et éviter les fichiers très volumineux.

Exemple

Disons que vous avez quelques fichiers.

- application.scss
- header.scss
- content
  |-- article.scss
  '-- list.scss
- footer.scss

Votre feuille de style principale application.scss peut importer tous les fichiers et définir ses propres styles.

// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';

// other styles in application.scss
body {
  margin: 0;
}

Notez que vous pouvez également omettre l’extension .scss afin d’écrire @import 'header'; au lieu de @import 'header.scss'.

Cela conduit à application.scss ayant tous les .scss importés inclus dans le fichier compilé que vous servez au client (navigateur). Dans ce cas, votre fichier compilé serait application.css que vous incluez dans votre html.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
  </head>
  <body>
    ...
  </body>
</html>

Bien que vous travailliez avec plusieurs fichiers, vous ne servez qu’un seul fichier, éliminant ainsi le besoin de plusieurs demandes (une pour chaque fichier) et accélérant le temps de chargement pour vos visiteurs.

Principaux avantages

  • Meilleure structure pour le développement à l’aide de dossiers et de plusieurs fichiers
  • Servir un seul fichier au client (navigateur)

Partiels

Vous pouvez créer des fichiers partiels contenant des extraits plus petits de vos feuilles de style. Cela vous permet de modulariser votre CSS et permet une meilleure structure de vos feuilles de style. Un partiel est un fichier Sass nommé avec un trait de soulignement au début, c’est-à-dire : _partial.scss. Le trait de soulignement permet à Sass de savoir que le fichier spécifique est un partiel et qu’il ne sera pas généré dans un fichier CSS.

Les partiels Sass sont destinés à être utilisés avec la directive @import. Lorsque vous utilisez @import, vous pouvez omettre le trait de soulignement initial.

Exemple

Supposons que vous ayez une structure de fichiers avec des partiels comme celui-ci

- main.scss
- _variables.scss
- content
  |-- _buttons.scss
  '-- _otherelements.scss

Vous pouvez inclure ces partiels dans votre fichier main.scss comme suit (les traits de soulignement et les extensions de fichier sont omis dans cet exemple) :

// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';
← Boucles et conditions
Les opérateurs →