Functions
4 methodsSass 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.
Parameters
| Name | Type | Description |
|---|---|---|
| $color | color | Base color. |
| $amount | percentage (0-100%) | Amount to lighten. |
Returns
color
Example
$base: #3498db;
.hover {
background: lighten($base, 10%);
}darken($color, $amount)Returns a color darkened by $amount (0%-100%) in HSL lightness.
Parameters
| Name | Type | Description |
|---|---|---|
| $color | color | Base color. |
| $amount | percentage (0-100%) | Amount to darken. |
Returns
color
Example
$base: #3498db;
.active {
background: darken($base, 10%);
}mix($color1, $color2, $weight: 50%)Mixes two colors together, with $weight indicating how much of $color1 to use.
Parameters
| Name | Type | Description |
|---|---|---|
| $color1 | color | First color. |
| $color2 | color | Second color. |
| $weight | percentage (0-100%) | Proportion of $color1 (default 50%). |
Returns
color
Example
$brand: mix(#ff0000, #0000ff, 60%);
// ~ #990099rgba($color, $alpha)Returns the given color with the specified alpha channel (opacity).
Parameters
| Name | Type | Description |
|---|---|---|
| $color | color | Base color. |
| $alpha | number (0-1) | Alpha value. |
Returns
color
Example
.overlay {
background: rgba(#000, 0.5);
}Directives
4 methodsSass 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.
Parameters
| Name | Type | Description |
|---|---|---|
| name | identifier | Mixin name. |
| args | any | Optional parameters with defaults. |
Returns
mixin definition
Example
@mixin button($bg: blue) {
background: $bg;
padding: 8px 16px;
border-radius: 4px;
}@include name($args...)Includes a previously defined mixin, optionally passing arguments.
Parameters
| Name | Type | Description |
|---|---|---|
| name | identifier | Mixin name to include. |
| args | any | Arguments matching the mixin signature. |
Returns
styles
Example
.cta {
@include button(red);
}@extend %placeholder | .selectorInherits the styles of another rule or placeholder, inserting the extending selector alongside the source.
Parameters
| Name | Type | Description |
|---|---|---|
| %placeholder | .selector | selector | Placeholder or class selector to extend. |
Returns
styles
Example
%card {
border: 1px solid #ccc;
border-radius: 6px;
}
.error-card {
@extend %card;
border-color: red;
}@include name { content }Passes a block of styles to a mixin via @content; useful for media-query wrappers.
Returns
styles
Example
@mixin respond-to($bp) {
@media (min-width: $bp) { @content; }
}
.sidebar {
@include respond-to(768px) {
width: 240px;
}
}