💎

SASS/SCSS Reference

The most mature, stable, and powerful professional grade CSS extension language. Essential syntax and code samples for professional development.

Variables

$primary: #3b82f6; color: $primary;

Nesting

nav { ul { margin: 0; } li { display: inline; } }

Mixins

@mixin flex-c { display: flex; align-items: center; }

Extend

%btn { padding: 10px; } .buy { @extend %btn; }

Include

@include flex-c;

Interpolation

.icon-#{$name} { color: red; }