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 input_path [output_path] [options]
sass --watch input_path[:output_path] [options]
sass --update input_path[:output_path] [options]
PARAMETERS
-w, --watch
Watch source files for changes and recompile automatically.
-u, --update
Compile only if the source file has been modified since the last compilation.
--style
Specify the output CSS style (e.g., expanded, compressed). The default is expanded.
--load-path
Specify a path to find imported Sass files. Can be used multiple times.
--no-source-map
Do not generate a source map file for the compiled CSS.
--source-map-urls
Specifies how source map URLs are generated (absolute or relative).
--error-css
Generate CSS even when errors occur, embedding the error message in the output.
-I, --indented-syntax
Treat *.sass files as using the indented (original) Sass syntax rather than SCSS.
-h, --help
Display help information about the command and its options.
-v, --version
Display the version information of the Sass compiler.
DESCRIPTION
Sass (Syntactically Awesome Stylesheets) is a powerful CSS preprocessor scripting language that is interpreted or compiled into CSS. It enhances the capabilities of standard CSS by introducing features like variables, nested rules, mixins, functions, and partials. These features enable developers to write more maintainable, reusable, and efficient stylesheets.
By using Sass, you can organize your CSS code more effectively, reduce repetition, and streamline development workflows, especially in large-scale projects. While not a native Linux command, the Sass compiler is widely used on Linux systems as a command-line tool, transforming .scss or .sass files into standard .css files that web browsers can understand. It helps in creating modular and scalable front-end architectures.
CAVEATS
Sass files (.scss or .sass) must be compiled into standard .css before they can be used by web browsers. This command-line tool serves as the compiler. It is not a built-in Linux utility but rather a development tool that needs to be installed, typically via a package manager like npm (for Dart Sass) or RubyGems (for Ruby Sass, now deprecated in favor of Dart Sass). Ensure you have a compatible runtime environment (Node.js or Ruby) if installing via their respective package managers.
USAGE WITH DIRECTORIES
To compile all Sass files in a directory and output them to another directory, you can use the --watch
flag with directory paths:sass --watch input_directory:output_directory
This command will monitor changes in the input directory and recompile all modified Sass files, outputting them to the specified output directory with their original relative paths preserved.
OUTPUT STYLES
The --style
option allows you to control the formatting of the compiled CSS:
- expanded: The default, human-readable CSS with standard indentation and line breaks.
- compressed: Minified CSS with all unnecessary whitespace removed, making the file size as small as possible.
- nested: (Deprecated in Dart Sass) Indented based on CSS nesting.
- compact: (Deprecated in Dart Sass) Each CSS rule is placed on a single line.
IMPORTING FILES
Sass allows importing other Sass files using the @import
rule. Files prefixed with an underscore (e.g., _variables.scss, _mixins.sass) are treated as "partials." Partials are not compiled into standalone CSS files; they are meant to be imported into other Sass files to modularize your stylesheets without creating unnecessary output files.
HISTORY
Sass was initially designed and developed by Hampton Catlin in 2006 and was later extended by Natalie Weizenbaum and Chris Eppstein. The original implementation, often referred to as "Ruby Sass," used the Ruby programming language. Over time, the primary implementation shifted to "Dart Sass" (or "LibSass" via C++), which is now the recommended and most actively maintained version, offering faster compilation and easier installation in many environments. Its widespread adoption significantly influenced modern web development workflows by promoting modularity and maintainability in stylesheets.