Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to watch changes in whole directory/folder containing many sass files

How could I trace changes in whole directory containing many sass files ? I'm using the following command to watch changes in sass

file:

sass --watch style.scss:style.css 

But how to watch changes in whole directory/folder containing many sass files.

like image 519
JA9 Avatar asked Aug 25 '13 10:08

JA9


People also ask

How do I watch changes in sass?

According to the information, you can use the next command line: sass --watch . Show activity on this post. You can create one sass file which includes the rest of the files, and then just watch this file.

How do I watch a SCSS file?

Open up Terminal and type the command cd desktop/project . This will bring you to the correct working directory on your desktop. Once you're in the project directory, write the command sass --watch scss:css to begin auto-compiling your Sass to CSS—provided you've already created the “scss” directory.

How do I use multiple sass files?

Create 1 scss file called combined. scss (for example) then inside of this file @import all your scss files, then simply run sass --style compressed --watch combined. scss:combined. css and it will detect changes to the imported scss files and recompile as needed.

Which directive is used to convert multiple sass into single or multiple CSS files?

Sass Importing Files Just like CSS, Sass also supports the @import directive. The @import directive allows you to include the content of one file in another.


2 Answers

Simply use the command sass --watch <input folder>:<output folder>, like this:

$ ls -l css/ sass/ $ sass --watch sass:css 

Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.

like image 63
piouPiouM Avatar answered Sep 21 '22 18:09

piouPiouM


Expanding the answer by piouPiouM a little:

  • Output files will be created with the same names as input files except ending with .css.
  • <input folder> and <output folder> can be the same.
  • Both folders can be the present working directory, so the following is valid:

    $ sass --watch .:.

like image 24
Gary Robertson Avatar answered Sep 17 '22 18:09

Gary Robertson