DOCSEARCHbyAlgolia
Submit Docs

Sass Documentation

website·Indexed 43 days ago

https://sass-lang.com/

Documentation for Sass, including the JS API for Dart Sass. Covers compiler classes (Compiler, AsyncCompiler), value types (SassColor, SassList, SassMap, SassBoolean), and interfaces for custom importers and deprecation handling. Includes details on compileString and compileAsync functions.

Tokens
129.3K
Snippets
807
Records
1.1K
Agent score
69%

What's inside Sass

  1. Overview of Sass operators

    Sass provides several types of operators for manipulating different value types:

    • Equality: == and != check if two values are identical.
    • Numeric: +, -, *, /, and % perform standard math. Units are handled according to scientific math rules.
    • Relational: <, <=, >, and >= compare two numbers.
    • Boolean: and, or, and not. In Sass, every value is considered true except for false and null.
    • String: +, -, and / can be used for string concatenation.

  2. Overview of the sass:list module

    The sass:list module provides functions to manipulate lists. In Sass, individual values and maps are also treated as lists. For example, a map (1: 2, 3: 4) is treated as a list containing two-element lists (1 2, 3 4). This module is supported in Dart Sass since version 1.23.0. Users of other implementations must use global function names instead of @use 'sass:list'.

  4. Overview of the Sass Module System

    The Sass Module System is designed to replace the legacy @import rule. The primary motivations for this overhaul are to solve issues related to global scope pollution, difficulty in tracking where mixins/functions/variables are defined, and the duplication of CSS output caused by textual inclusion. The system introduces two new top-level at-rules: @use and @forward.

  5. Overview of Sass language capabilities

    Sass is a stylesheet language that compiles to CSS. It extends standard CSS by providing features such as variables, nested rules, mixins, and functions, while maintaining a fully CSS-compatible syntax to help organize large stylesheets and share designs across projects.

  6. Overview of wide gamut color support in Sass

    Sass supports wide gamut CSS color formats as first-class color data types. This allows developers to manipulate, mix, convert, and inspect these colors using Sass tools rather than just passing them as raw CSS strings to the browser. Supported formats include gamut-bounded spaces (like display-p3) and perceptually uniform, theoretically unbounded spaces (like oklch and oklab).

  8. Overview of Sass Flow Control Rules

    Sass provides four flow control at-rules that allow developers to conditionally emit styles or repeat style blocks with variations. These rules can be used globally or within mixins and functions to implement logic and algorithms in stylesheets.

  9. Overview of Sass CSS extension language

    Sass is a professional-grade CSS extension language that is fully compatible with all versions of CSS, allowing for the seamless use of existing CSS libraries. It is widely adopted by the industry and used as the foundation for numerous CSS frameworks such as Bootstrap, Bourbon, and Susy.

  10. Overview of the SassMixin class

    The SassMixin class represents a Sass mixin type. It inherits from the Value class. Note that it is not possible to construct a SassMixin instance outside of Sass; attempting to use the constructor will throw an exception.

  11. Overview of Sass At-Rules

    Sass extends CSS by providing a variety of at-rules that enable modularity, reusability, and logic within stylesheets. These include:

    • Module System: @use (loads mixins, functions, and variables), @forward (makes members available to other stylesheets using @use), and @import (legacy method to load styles and members).
    • Reusability: @mixin and @include (reusable style chunks), @function (custom functions for expressions), and @extend (selector inheritance).
    • Output Control: @at-root (forces styles to the root of the CSS document).
    • Diagnostics: @error (stops compilation with a message), @warn (prints a warning), and @debug (prints a debug message).
    • Flow Control: @if, @each, @for, and @while (conditional and iterative style emission).

    Additionally, Sass allows plain CSS at-rules (like @media and @supports) to be nested within style rules and to use interpolation or SassScript directly.

  12. Install Sass as a standalone binary

    Download the latest Sass package for your OS and CPU architecture from the GitHub releases page. Windows users receive a ZIP file, while macOS and Linux users receive a .tar.gz tarball. Extract the archive to find the dart-sass directory containing the sass executable (or sass.bat on Windows). To run Sass from any directory, add the extracted dart-sass directory to your system's PATH environment variable.