Sass Functions and Control Flow
Write dynamic CSS logic using Sass built-in functions, @if, @each, and @for directives.
Sass Built-in Functions
Sass provides many built-in functions for color manipulation, math, string operations, and more. These run at compile time.
$base: #3b82f6;
.darker { background: darken($base, 15%); }
.lighter { background: lighten($base, 15%); }
.faded { background: transparentize($base, 0.5); }
.mixed { background: mix($base, white, 60%); }Color Functions
Key Sass color functions:
darken($color, $amount)lighten($color, $amount)saturate($color, $amount)mix($color1, $color2, $weight)rgba($color, $alpha)color.scale($color, $lightness: 20%)
All lessons in this course
- Variables Nesting and Partials
- Mixins and Includes
- Extend and Placeholder Selectors
- Sass Functions and Control Flow