sass
Partials et Import
Recherche…
Importer
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 ainsi que 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 pour pouvoir é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 code HTML.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
Bien que vous utilisiez plusieurs fichiers, vous ne fournissez qu'un seul fichier, ce qui élimine le besoin de plusieurs requêtes (une pour chaque fichier) et accélère le temps de chargement de vos visiteurs.
Principaux avantages
- Meilleure structure pour le développement en utilisant un dossier et 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 partial est un fichier Sass nommé avec un trait de soulignement principal, à savoir: _partial.scss . Le trait de soulignement permet à Sass de savoir que le fichier spécifique est 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 principal.
Exemple
En supposant 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 main.scss soulignement et les extensions de fichier sont omis dans cet exemple):
// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';