Importation de fichiers dans SASS

Lorsque l'on travaille avec des fichiers SASS, il est parfois nécessaire de transférer le code d'un document .scss, mais sans créer son clone avec l'extension .css, c'est-à-dire d'importer son fragment.

Par exemple, nous avons un fichier navbar.scss avec le code suivant :

.active {
	color: red;
}

Pour réaliser ce type d'import, il faut d'abord ajouter un tiret bas devant le nom du fichier, comme ceci : _navbar.scss. Ensuite, dans un autre fichier style.scss, nous écrivons la directive @import, mais dans le nom du fichier importé, le tiret bas, comme l'extension du fichier, n'est pas indiqué :

@import "navbar";

Et nous voyons que lors de la compilation dans style.css le code du fichier _navbar.scss a été importé :

.active {
	color: red; 
}

Créez un fichier main.scss avec le contenu suivant :

.block-content {
	padding: 10px;
	margin-left: auto;
	width: 600px;
	font-size: 14px;
}

Ensuite, importez son fragment dans le fichier styles.scss et compilez-le en styles.css.