LinuxCommandLibrary

sass

Compile Sass/SCSS files to CSS

TLDR

Convert a SCSS or Sass file to CSS and print out the result

$ sass [inputfile.scss|inputfile.sass]
copy

Convert a SCSS or Sass file to CSS and save the result to a file
$ sass [inputfile.scss|inputfile.sass] [outputfile.css]
copy

Watch a SCSS or Sass file for changes and output or update the CSS file with same filename
$ sass --watch [inputfile.scss|inputfile.sass]
copy

Watch a SCSS or Sass file for changes and output or update the CSS file with the given filename
$ sass --watch [inputfile.scss|inputfile.sass]:[outputfile.css]
copy

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.

SEE ALSO

npm(1), gem(1), lessc(1), postcss(1)

Copied to clipboard