web-dev-qa-db-fra.com

De nombreux fichiers SCSS/SASS dans un fichier CSS?

Est-il possible de faire sass écouter un répertoire avec plusieurs fichiers sass et générer un fichier CSS? J'ai trouvé un moyen d'inclure plusieurs fichiers Sass dans un seul (style.scss):

@import "scss/header";
@import "scss/footer";

Et puis exécutez le code suivant:

sass --watch style.scss:style.css

mais le problème est que je dois changer ce fichier avant de générer un nouveau fichier CSS.

htmlcsssass
31
voigtan

Si vous regardez le répertoire, sass pourra remarquer les modifications apportées aux fichiers @imported et mettre à jour les fichiers dépendants.

style.scss:

@import "header";
@import "footer";

Et fait:

sass --watch .

Il compilera tous les fichiers du répertoire en .css; ignorer les fichiers dont le nom commence par _.

Si vous modifiez _header.scss ou _footer.scss, vous devrez également mettre à jour style.scss.

Vous pouvez également sortir dans un autre répertoire:

sass --watch .:output_dir/
52
Arnaud Le Blanc

Vous pouvez dire à SASS de regarder un dossier entier avec:

sass --watch application/sass:public/stylesheets

Si vous importez tous vos fichiers partiels, cela devrait générer un fichier. Chaque fois que vous modifiez un fichier dans le dossier, les fichiers CSS sont générés automatiquement.

4
Luwe

Je voulais juste ajouter, Vous pouvez également appeler Variables ($) et Mixins à partir d’autres fichiers.

Par exemple:

_variable.scss = $primary:#000 
_header.scss = header {color:$primary;} 
_footer.scss = footer {background:$primary}

custom.scss : 

@import "_variables.scss";
@import "_header.scss";
@import "_footer.scss";

Sortie = custom.css 

header {color:#000;}
footer {background:#000;}
0
Dharam Mali