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