Skip to content

Try our new Crash Courses!

Become a member using the button below to hide this banner and gain access to our new Crash Courses.

How to run Sass

Details

The command you use to run Sass will vary depending on what you’re trying to do.

To automatically compile a single Sass file into CSS every time you save, enter the command below in your terminal. Replace main.scss with the name of your Sass file (if it has a different name) and main.css with whatever you want your CSS file to be called (it doesn’t have to match the name of your Sass file).

sass --watch main.scss main.css

To automatically compile a Sass folder into a CSS folder every time you save, enter the command below in your terminal. Replace assets/sass with the file path to your Sass folder (if it has a different path in your project) and assets/css with the file path to your CSS folder (Sass will create the folder for you if it doesn’t already exist). Note: The two folders don’t have to be inside of the same folder.

sass --watch assets/sass:assets/css

If you don’t need Sass to automatically compile your Sass code into CSS every time you save, you can leave off the --watch flag. For example, if you just need to compile a Sass file into a CSS file once, you can enter the following command in your terminal:

sass main.scss main.css

More Examples

Here’s an example where the output file has a different name than the input file.

sass --watch input.scss output.css

Here’s an example where the sass folder is outside the assets folder.

sass --watch sass:assets/css

Exercises

Try using the following command to run Sass in the run-sass folder:

sass --watch main.scss main.css

References

Sass Basics | Sass Websites

Dart Sass Command-Line Interface | Sass Documentation

Back to: Sass Reference