Is it possible to convert whole folder with convert-sass? (scss to sass)

Question

I have a bunch of files in bunch of folders in SCSS format. I need to convert it all to SASS format, and I know sass has a specific command for that convert-sass, however I am not sure whether it is possible to convert whole folder (with folders inside)?

If its possible, then how convert-sass, else maybe there is a compiler who is able to do that? Thank you upfront:)

Do you actually need to convert? You can mix and match sass and scss files in the same project. — cimmanon, Oct 21 '14 at 17:56
I would prefer to convert, i want to modify all the files, plus I like it neat (that's why I am willing to go file by file in worst scenario) — nerijusgood, Oct 21 '14 at 18:08
If `convert-sass --help` doesn't provide information on how to do this, your best bet would be to ask "how do I run a command recursively over a directory of files in your terminal". — cimmanon, Oct 21 '14 at 18:21
that is actually a good idea, if till tomorrow nobody will give more direct solution, i will use yours! thanks — nerijusgood, Oct 21 '14 at 18:48

score 19 · Accepted Answer · answered Oct 21 '14 at 19:00

19

Yes, sass-convert accepts a recursive argument.

If you run sass-convert --help, it will give you a list of available options. One of them is:

-R, --recursive      Convert all the files in a directory. Requires --from and --to.

So, your command should look like this:

sass-convert -R my_sass_dir --from sass --to scss

answered Oct 21 '14 at 19:00

Steve Sanders

8,444
2
30
32

4

2020 update - there is no `sass-convert` in Dart Sass (installed via npm), but we can access it by installing deprecated Ruby SASS - `gem install sass`. – Jakub Zawiślak Jul 30 '20 at 09:13
Thank you @JakubZawiślak, I wasn't able to make it work through my global NPM but `gem install sass` worked for me, you saved my day. – Rafael López Dorado Sep 10 '20 at 09:04
how to remove old scss file in same cmd? – Matrix Feb 10 '23 at 00:29

score 1 · Answer 2 · answered May 03 '18 at 08:25

Here's a slighly more extensive answer:

go to your project subfolder, under which all your styles sit (also, because you want to leave node_modules alone, do you?)

cd frontend/src
convert in place, as said (consider --indent 4 if that's your indentation style...)

sass-convert -R . --from scss --to sass --in-place
you almost certainly want to rename all those .scss files to .sass (details)

find . -name '*.scss' -exec sh -c 'mv "$0" "${0%.scss}.sass"'
In your .js or .jsx files, you want to adjust your import statements.

find . -name '*.jsx' -print0 | xargs -0 sed -i "s/'\.$.*$\.scss'/'.\1.sass'/g"

More specifically, only your local import statements, starting with a '.', not your global imports, i.e. pointing to node_modules… right?

Testcase:
```
import './style.scss' // should change to .sass
import './bar.scss'   // should change to .sass
import 'slick-carousel/slick/slick.scss' // leave me alone!
```

Remaining pitfalls are:

Your webpack.configs (loaders!), grunt or gulpfile, still matching against .sass
global ‘common’ imports which you might prepend…

Is it possible to convert whole folder with convert-sass? (scss to sass)

2 Answers2

Here's a slighly more extensive answer:

Linked