Sass

Sass API Reference

Learn about Sass's public API, including functions, mixins, and core utilities.

Core API Features

Functions

50+ built-in functions for color manipulation, math operations, and string transformations.

Mixins

Reusable code snippets for common styling patterns like buttons, cards, and responsive utilities.

Utilities

Helper functions and data structures for debugging, type conversion, and CSS selector generation.

Key API Components

Color Functions

color.adjust($color, $alpha...) 1.70.0
color.scale($color, $lightness...) 1.69.0
color.get($color, $channel) 1.68.0

$primary-color: #3b82f6;
$info-color: color.adjust($primary-color, $lightness: -10%);
$alert-color: color.scale($primary-color, $alpha: 0.2);

Selector Utils

selector.nest($selectors...) 1.70.0
selector.append($selectors...) 1.69.0
selector.parent() 1.68.0

$component: selector.append("#my-component", ".active");
$nested: selector.nest($component, "~", "#modal");

For Developers

Using Mixins

@import "sass/utilities";

@include media-breakpoint-up(sm) {
.my-component {
@include card();
@include hover-underline();
}
}

API Updates

Add new API features to Sass by:

  • 1. Implementing the API spec
  • 2. Adding documentation to functions
  • 3. Including automated tests
View on GitHub

Output CSS

#my-component.active {
background-color: #3b82f6;
transition: all 0.3s ease;
}

#my-component.active:hover {
color: #000;
text-decoration: underline;
}