Sass Site Documentation

Sass supports various ways to define colors, including hex codes, CSS color names, and color functions.

• Hex codes: #f2ece4 or #b37399aa (supports alpha channel).
• CSS color names: midnightblue, transparent.
• Color functions: rgb(), lab(), color(), etc.

Note: LibSass, Ruby Sass, and older versions of Dart Sass do not support hex colors with an alpha channel or color spaces other than rgb and hsl.

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204 102 153); // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7); // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576); // color(display-p3 0.597 0.732 0.576)

Sass provides four at-rules for flow control. These rules allow you to control whether styles are emitted, emit them multiple times with variations, or write algorithms within @mixins and @functions.

• @if: Controls whether or not a block of code is evaluated based on a condition.
• @each: Evaluates a block for every element in a list or every pair in a map.
• @for: Evaluates a block a specific number of times.
• @while: Evaluates a block repeatedly until a specific condition is no longer met.

Sass can be installed via several different methods depending on your workflow and operating system:

Node.js Libraries

• sass package: A pure JavaScript implementation. It is slower but highly portable and can be installed on any platform that supports Node.js.
• sass-embedded package: A wrapper around the Dart VM. It is significantly faster but only supports Windows, Mac OS, and Linux.

Desktop Applications

For a GUI-based experience, you can use:

• CodeKit (Paid, Mac)
• Prepros (Paid, Mac, Windows, Linux)

Command Line Interface (CLI)

Installing via the CLI allows you to run the sass executable directly to compile .sass and .scss files to .css files.

Unitless numbers can be compared against numbers with specific units. When performing this comparison, the unitless number is automatically converted to the unit of the other expression.

@debug 100 > 50px; // true (100 is treated as 100px)
@debug 10px < 17;  // true (17 is treated as 17px)

The scope of an @extend depends on how you load your stylesheets:

• With @use or @forward: Extensions are scoped to upstream modules. An @extend in a module will only affect style rules in modules that were loaded by that stylesheet (the modules it @uses or @forwards). This makes extensions predictable.
• With @import: Extensions are global. An @extend will affect every stylesheet that imports the current stylesheet, as well as everything those stylesheets import, creating a wide-reaching side effect.

You can pass special functions like calc() or var() in place of any argument to a global color constructor. You can even use var() in place of multiple arguments. When a color function is called this way, it returns an unquoted string using the same signature it was called with.

@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach)); // color(display-p3 var(--peach))

The Node Package Importer follows a specific resolution order to find Sass or CSS files within a dependency. This allows it to work with modern conditional exports as well as older package structures.

1. Conditional Exports

It first looks for the sass, style, or default conditions within the exports field of the package's package.json that resolve to a Sass or CSS file.

2. Root Exports (if no subpath is provided)

If you are importing the package root (e.g., @use "pkg:library";), it searches the package.json root for:

1. A sass key.
2. A style key.
3. An index file at the package root (resolving for file extensions and partials).

3. Subpath Resolution

If a subpath is provided (e.g., @use "pkg:library/utils";), the importer resolves that path relative to the package root, searching for file extensions and partials.

Sass automatically simplifies calculations whenever possible:

1. Compile-time math: If adjacent operations use compatible units (e.g., 1in + 10px or 5s * 2), Sass simplifies them.
2. Single value reduction: If a calculation can be reduced to a single number (e.g., clamp(0px, 30px, 20px)), Sass returns that number (e.g., 20px).
3. Nested calculations: If a calc() is nested inside another calculation, Sass removes the inner calc() call and replaces it with a plain operation.

Note for Library Authors: Because a calculation might be simplified into a plain number, use meta.type-of() to check the resulting type if your logic depends on it being a calculation expression.

$width: calc(400px + 10%);

.sidebar {
  width: $width;
  padding-left: calc($width / 4);
}

The transition from / as a division operator to / as a list separator is being rolled out in three stages to manage breaking changes:

Stage 1: Preparation (No breaking changes)

• divide() function is added (works like / but warns on non-number arguments).
• slash-list() function is added to create slash-separated lists.
• Deprecation warnings are issued for all / operations interpreted as division.

Stage 2: Breaking Change

• / becomes exclusively a list separator.
• divide() throws errors for non-number arguments.
• slash-list() is deprecated.

Stage 3: Cleanup

• The slash-list() function is removed (planned for a future major version).

Sass allows you to nest your CSS selectors to follow the visual hierarchy of your HTML. This helps organize CSS and improves readability, but avoid overly deep nesting to prevent overly-qualified CSS.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}