How to convert directory SASS/SCSS to CSS via command line?
Use the sass
command followed by the input file name and path
, a colon (:
) and the desired output file name and path
. If the output file does not already exist Sass will generate it. For example,
sass sass/main.scss:css/main.css
However, this is a one-off command that would require being run every time you want to generate a new CSS file. A simpler and handier method is to use Sass's built-in --watch
flag. This watches for changes to your Sass file and automatically runs the compile command each time you save changes.
sass --watch sass/main.scss:css/main.css
If you have multiple Sass files within a directory you can watch for changes to any file within that directory:
sass --watch sass:css
Sass also has four CSS output styles available: nested
, expanded
, compact
and compressed
. These can be used thus:
sass --watch sass:css --style compressed
Refer to the Sass documentation for more.
To do a one-time Sass compile instead of a watch
, you can do this from the command line:
sass --update scss:css
To have Sass import one file (usually a partial, with a _
starting the filename), you can do this inside a Sass file:
@import "_base.scss";
This way, Sass knows where you want the include to occur.
By default, Sass can't import an entire directory. The Sass Globbing gem, however, can. You can install it from the command line:
gem install sass-globbing
And then watch with it:
sass -r sass-globbing --watch sass_dir:css_dir
Note that globbing will import files alphabetically, so be sure your CSS will cascade appropriately if this occurs.
to that, simply go your project directory and do this :
sass --update sass-dir:assets/css
with sass-dir the directory containing your actual sass files and assets/css the desired output directory.
Hope this could help.