sass
Compile Sass/SCSS files to CSS
TLDR
Convert a SCSS or Sass file to CSS and print out the result
Convert a SCSS or Sass file to CSS and save the result to a file
Watch a SCSS or Sass file for changes and output or update the CSS file with same filename
Watch a SCSS or Sass file for changes and output or update the CSS file with the given filename
SYNOPSIS
sass [options]
PARAMETERS
The input Sass file to compile.
[output.css]
The output CSS file to write to. If omitted, the CSS will be written to standard output.
--watch
Watches the input file or directory and recompiles whenever changes are made.
--update
Updates the output file if the input file has been modified. Can take multiple input:output pairs.
--style
Specifies the output style. Valid options are: nested, expanded, compact, and compressed. Default: nested.
--sourcemap
Generates a source map for debugging.
--no-sourcemap
Do not generate source maps.
--load-path
Specifies an additional load path for Sass to search for imports. Can be specified multiple times.
--precision
Sets the precision for floating point numbers. Default: 10.
--stop-on-error
Stop compilation immediately if an error is encountered.
--trace
Show a full stack trace on error.
--help
Displays help information.
--version
Displays the Sass version.
DESCRIPTION
Sass (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is compiled or interpreted into Cascading Style Sheets (CSS). Sass allows you to use features that are not available in CSS3, such as variables, nesting, mixins, inheritance, and operators. Using Sass makes it easier to maintain and write clean, DRY (Don't Repeat Yourself) CSS code.
The `sass` command compiles Sass (``.sass`` or ``.scss``) files into CSS files, and can also be used to watch files for changes and automatically recompile them. It offers several options to customize the compilation process, including output styles (nested, expanded, compact, compressed), source maps, and error handling.
CAVEATS
The behavior of the `sass` command can vary slightly depending on the specific Sass implementation (Dart Sass, LibSass) and its version. Dart Sass is generally recommended and actively maintained.
Ensure that the input and output paths are valid and that you have the necessary permissions to read and write files.
OUTPUT STYLES
Nested: Indented like the original Sass syntax.
Expanded: Each CSS rule occupies its own line.
Compact: Each CSS rule takes up only one line.
Compressed: Removes all unnecessary whitespace for minimal file size.
IMPORTING SASS FILES
Use the `@import` directive within your Sass files to include other Sass files. Partial files (named with a leading underscore, e.g., `_variables.scss`) are commonly used to store variables, mixins, and functions, and they should not be compiled directly.
WORKFLOW EXAMPLE
Typical Sass workflow:
1. Create a directory structure for your Sass files (e.g., `sass/`).
2. Create your Sass files (e.g., `style.scss`, `_variables.scss`).
3. Compile your Sass files to CSS using `sass sass/style.scss css/style.css`.
4. Use the `--watch` option for automatic recompilation during development: `sass --watch sass/style.scss:css/style.css`.
HISTORY
Sass was initially created by Hampton Catlin and developed by Natalie Weizenbaum in 2006. It aimed to extend CSS with programmatic features. Over time, two main syntaxes emerged: the original indented syntax (``.sass``) and the SCSS syntax (``.scss``), which is a superset of CSS and more widely adopted. Today, Dart Sass is the primary implementation maintained by the Sass team.
SEE ALSO
css(1)