Can anyone tell me how to compile sass into css automatically?

Question

I had to rewrite this every time I want to see a live preview.

sass stylesheet.scss stylesheet.css

Stradivarius

Explain your question in more detail kindly – Horripilate

Possible duplicate of How to convert directory SASS/SCSS to CSS via command line? – Saccharide

You can use a software. I use Koala App to do this for me. He runs automatically and watches for the file changing. Is tricky to config, but will help you a lot. – Alveta

Answer 1

I use sass --watch stylesheet.scss:stylesheet.css. When saving your .scss file, it'll automatically update the .css file.

You might also consider sass --watch stylesheet.scss:stylesheet.css --style expanded --sourcemap=none to keep the .css file readable.

I'd recommend the Sass Workflow class on Udemy.

Halden

Thank you. that's very helpful. – Stradivarius

Answer 2

Try out Grunt or Gulp with Sass: A great tutorial: https://www.taniarascia.com/getting-started-with-grunt-and-sass/

Hodosh

Answer 3

You need something to compile it automatically. As an example, there are solutions that use node.js to automatically compile for you on your computer. One tool is Foundation for Websites by Zurb.

You can install the application which will automatically compile sass for you.

For more information, check out: http://foundation.zurb.com/sites/download.html/

Idel

Answer 4

you can use this code

sass --watch file.sass:file.css

or

sass --watch foldersass:foldercss

Thorstein

Answer 5

Sass can be compiled automatically using below command:

sass --watch SASS_SOURCE_PATH:CSS_BUILD_PATH --style=expanded --no-source-map

Where:

• SASS_SOURCE_PATH: Path of sass file

• CSS_BUILD_PATH: Path of build CSS file. Where do you want to save CSS file

• --no-source-map: will not output a map file, which is not readable.

• --style=expanded: will expand CSS to human readable.

Eggshaped

This is the same answer than the one already existing. Please don't answer questions if there is nothing more to say – Wiliness