De nombreux fichiers SCSS/SASS vers un fichier CSS ?

Question

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

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

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.

Answer 1

Si vous regardez le répertoire, sass sera en mesure de remarquer des changements dans les fichiers @imported et de mettre à jour les fichiers dépendants.

style.scss :

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

Et faites :

sass --watch .

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

Je modifie _header.scss ou _footer.scss, si je mets à jour style.scss aussi.

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

sass --watch .:output_dir/

Answer 2

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 seul fichier. Chaque fois que vous modifiez un fichier dans le dossier, les fichiers CSS seront générés automatiquement.

Answer 3

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;}