Sass

Functions & Directives API Reference

Sass built-in functions for color manipulation and the @mixin/@include/@extend control directives.

By EZ4Code TeamLast updated: 2026-08-01

Functions

Sass color functions for adjusting lightness and mixing colors. Operate on Sass color values at compile time.

lighten($color, $amount)

Returns a color lightened by $amount (0%-100%) in HSL lightness.

Returns: color

darken($color, $amount)

Returns a color darkened by $amount (0%-100%) in HSL lightness.

Returns: color

mix($color1, $color2, $weight: 50%)

Mixes two colors together, with $weight indicating how much of $color1 to use.

Returns: color

rgba($color, $alpha)

Returns the given color with the specified alpha channel (opacity).

Returns: color

Sass control directives @mixin, @include, and @extend for reusable styles and selector inheritance.

@mixin name($args...) { ... }

Defines a reusable block of styles that can accept arguments. Invoked with @include.

Returns: mixin definition

@include name($args...)

Includes a previously defined mixin, optionally passing arguments.

Returns: styles

@extend %placeholder | .selector

Inherits the styles of another rule or placeholder, inserting the extending selector alongside the source.

Returns: styles

@include name { content }

Passes a block of styles to a mixin via @content; useful for media-query wrappers.

Returns: styles