How to Compile SASS to CSS on the Command Line

SASS is a powerful preprocessor that enhance the capability of CSS. However, since browsers only understand CSS, SASS files need to be converted to CSS. You have a few options to achieve this, but in this article, we'll show you how to convert SASS and SCSS to CSS on the command line. Additionally, we'll explore various option flags that customize the conversion

Before you dive into the conversion process, make sure you have Nodejs and NPM installed on your computer. Let's get started.

How To Install the SASS Compiler

The Sass package, which provides the executable sass command, can be installed via NPM.

To install it as a global dependency, run the following command:

npm install -g sass

How To Convert SASS to CSS

Now that you have sass installed on your machine, you can use it to compile your SASS code into CSS. Go to your working directory and run the following command on your command line

sass path/to/styles.scss path/to/styles.css

where:

• styles.scss is the input SCSS file.
• styles.css is the output CSS file.

After running this command, you should see styles.css file in your project directory. This file contains the compiled CSS code from your SASS file.

How To Customize The Conversion

The sass command provides various option flags to customize the conversion, including;

--style flag:

This flag allows you to specify the output style of the compiled CSS. The available options are expanded (default), compressed, nested, and compact.

For example, to compile SASS to compressed CSS, you can run:

sass --style compressed styles.scss styles.css

--watch flag

This flag enables the watch mode, which automatically recompiles your SASS file whenever changes are detected. It's useful for continuous development.

To use watch mode, run:

sass --watch styles.scss:styles.css

--no-source-map

By default, Sass generates source maps to help with debugging. If you want to disable source map generation, you can use this flag.

For example:

sass --no-source-map styles.scss styles.css

--load-path flag

This flag allows you to specify additional load paths for Sass to search for imported files.

For example, if you have SASS files in a separate folder called scss, you can include it as a load path like this:

sass --load-path scss styles.scss styles.css

--quiet flag

If you want to suppress compilation warnings and status messages, you can use the --quiet flag. This is useful when you want a quieter command-line experience:

sass --quiet styles.scss styles.css

--stop-on-error flag

If you want to stop watching and exit the Sass process as soon as an error is encountered during compilation or watch mode, you can use the --stop-on-error flag:

sass --watch --stop-on-error styles.scss:styles.css

--update flag

This flag can be used with watch mode to limit recompilation to specific files. For example, if you have multiple SASS files but only want to watch and recompile styles.scss, you can use:

sass --watch --update styles.scss:styles.css

Conclusion

Before using SASS in your web pages, it must be converted into regular CSS files as browsers only understand CSS codes.

Converting SASS to CSS on the command line is a straightforward process using the npm SASS package. With its customization flags you can also easily customize the conversion.

Thank you for reading.