How to convert directory SASS/SCSS to CSS via command line?

Question

I tried:

sass-convert --from scss --to css --recursive app/assets/stylesheets temp

But this only converts css to SASS, and I want the other way around.

Then I looked at the sass command, but it doesn't look like I can pass it a directory.

Tenia

Yes, but I could not find a way to convert an entire directory with one sass command. The sass command only seems to do one file at a time, am I wrong? I know the sass --watch command will watch a directory for changes, but I need a single command line entry that will process a directory when I need to. Thanks in advance. – Tenia

Of course. It seems that you can watch a directory, but I can't get it to work where it just converts a directory with one command (not watch for changes). Can you show me an example of a single command line string that can convert a directory? – Tenia

Pretty easy: sass --update www/_src/sass:www/css/ . Reference: sass-lang.com/documentation/file.SASS_REFERENCE.html – Transubstantiation

@Hawk, the directory thing only works (at least for me on osx) if I have previously compiled the individual files. Sass seems to rely on .sass-cache or .map to know what and where to name files. – Cantoris

Answer 1

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.

Well

Thank you so much for this. FWIW, my CSS file output was in the same order as the input. The files were not rearranged alphabetically. – Rotarian

Answer 2

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.

Personable

Answer 3

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.

Fairway

Answer 4

You can use compass to convert Sass files into CSS.

To initialize the config.rb, try:

compass init --syntax=sass --css-dir=css --javascripts-dir=js

Once you've the configuration file, try:

compass compile

or by specifying the file explicitly: compass compile sass/foo.scss.

---

To install it, try:

sudo gem update
sudo gem install sass compass

Smriti

The OP is not asking about Compass, this is not a tool request question (hint: the question would be closed it it were). – Alow

@Alow This answer answers the title question (how to convert sass to css via cmd) and that was the main reason I've found this question and in my case compass did the job as sass didn't work for me, therefore I think awareness of alternatives can be useful for further readers. – Smriti

Unless your project requires Compass, there is no reason why Sass would not work. – Alow

Yes, it required Compass, as the site was based on Zen theme so it had a lot of missing imports/references. – Smriti

Answer 5

https://sass-lang.com/guide

you can use

sass --watch [input folder path]:[output folder path]

i tried running it in a new terminal and after that sass watches the folder and compiles upon any changes.

Torrential

Answer 6

you can use this code

sass --watch file.sass:file.css

or

sass --watch folderSass:foldercss

if you want to create css.main you can use this code

sass --watch sass:css --style compressed

Runway