Compile SCSS Using the Sass CLI

The Sass command-line interface accepts source and destination paths. The source may be a single SCSS file or a directory of Sass files.

The basic form is sass input.scss output.css. You can also compile a directory recursively using sass src/scss:public/css, allowing Sass to generate CSS for stylesheet entry points in the source directory.

Common options include:

--watch: Recompile when source files change.
--style=expanded: Produce readable CSS with expanded formatting.
--style=compressed: Minify the generated CSS.
--no-source-map: Disable source-map generation.

Directory compilation does not mean every file is necessarily intended to be a standalone stylesheet. Partial files and entry points should be organized carefully to avoid emitting unnecessary CSS files.

Watch mode is a development tool

Keep the watcher running while editing SCSS. For production, use a reproducible build command rather than relying on a manually running watcher.

Useful Compilation Commands

npx sass src/scss/main.scss public/css/main.css
npx sass --watch src/scss:public/css
npx sass --style=compressed src/scss/main.scss public/css/main.min.css
npx sass --no-source-map src/scss/main.scss public/css/main.css

💡 The first command performs a one-time compilation. The second watches a directory. The third emits compressed CSS for production-oriented output. The fourth disables source maps. Compressed CSS reduces whitespace and formatting overhead, but it does not replace thoughtful CSS architecture or eliminate duplicated declarations.

Knowledge Check

Which CLI option automatically recompiles Sass files when they change?

Compile SCSS Using the Sass CLI

STAY UPDATED WITH BYTES!