Sass - Output Style

Sass - Output Style

When Sass compiles your .scss or .sass files into CSS, it can format the output in different ways. Choosing the right output style depends on whether you are developing or deploying your application.

Sass (specifically Dart Sass, the primary implementation) supports the following main output styles, typically configured via a command-line flag (--style) or build tool options:

expanded

This is the default style. It writes each selector and declaration on its own line, closely resembling how most developers write CSS by hand. It includes indentation reflecting the Sass nesting, making it readable and easy to debug during development.

Example SCSS Input:

.card {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;

  h2 {
    color: #343a40;
  }
}

Compiled Output (--style expanded):

.card {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}
.card h2 {
  color: #343a40;
}

compressed

This style removes as much whitespace and unnecessary characters (like comments and trailing semicolons) as possible, resulting in the smallest possible file size. It puts the entire CSS output onto a single line, unless line breaks are necessary for CSS syntax (e.g., within @media blocks). This style is ideal for production environments to minimize bandwidth usage.

Example SCSS Input (same as above):

.card {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;

  h2 {
    color: #343a40;
  }
}

Compiled Output (--style compressed):

.card{background-color:#f8f9fa;border:1px solid #dee2e6}.card h2{color:#343a40}

Other Historical Styles (Less Common)

Older versions of Sass (like Ruby Sass) supported additional styles like :nested and :compact. While Dart Sass might support them programmatically, they are not typically available as command-line options and are less relevant in modern workflows.

• Nested: Similar to expanded, but indentation directly matched the nesting level in the Sass source. Could be useful but expanded is generally preferred for readability.
• Compact: Tried to put each CSS rule on a single line, combining selectors and properties. Aimed for a balance between readability and size but wasn’t widely adopted.

Recommendation

Use expanded during development for readability and easy debugging (especially with source maps).

Use compressed for production builds to optimize loading performance.

You can control the output style using the --style flag with the Sass CLI:

# Development
sass --watch input.scss:output.css --style=expanded

# Production Build
sass input.scss:output.css --style=compressed --no-source-map

Note: --no-source-map is often used for production builds to avoid shipping map files, though some prefer to generate them for easier production debugging.