Sass Cheat Sheet

$primary: #3b82f6;
$font-stack: 'Inter', sans-serif;
$spacing: 1rem;
$border-radius: 0.5rem;

.button {
  background: $primary;
  font-family: $font-stack;
  padding: $spacing;
  border-radius: $border-radius;
}

$color: blue !default;  // Can be overridden

.component {
  $local: red;  // Only in this scope
  color: $local;
}

$global: green !global;  // Accessible everywhere

.nav {
  background: white;

  &__item {
    padding: 1rem;

    &--active {
      color: blue;
    }
  }

  &:hover {
    background: gray;
  }
}

.parent {
  color: blue;

  @at-root .child {
    color: red;  // Not nested under .parent
  }
}

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

.hero {
  @include flex-center;
  min-height: 100vh;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

.sidebar {
  width: 100%;
  @include responsive(desktop) {
    width: 300px;
  }
}

@mixin button($bg: #3b82f6, $color: white, $radius: 0.5rem) {
  background: $bg;
  color: $color;
  border-radius: $radius;
  padding: 0.5rem 1rem;
}

.btn-primary { @include button; }
.btn-danger { @include button($bg: red); }

@function rem($px) {
  @return calc($px / 16) * 1rem;
}

.title {
  font-size: rem(24);  // 1.5rem
  margin-bottom: rem(16);  // 1rem
}

darken($primary, 10%)
lighten($primary, 20%)
mix(blue, red, 50%)
percentage(0.5)     // 50%
round(4.7)          // 5
min(100px, 50vw)
str-length("hello") // 5

@mixin theme($mode) {
  @if $mode == dark {
    background: #1a1a1a;
    color: white;
  } @else {
    background: white;
    color: #1a1a1a;
  }
}

$sizes: (sm: 0.875rem, md: 1rem, lg: 1.25rem, xl: 1.5rem);

@each $name, $size in $sizes {
  .text-#{$name} {
    font-size: $size;
  }
}

@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage(calc($i / 12));
  }
}

// _variables.scss
$primary: blue;

// main.scss
@use 'variables';
.button { color: variables.$primary; }

// With namespace
@use 'variables' as v;
.button { color: v.$primary; }

// _index.scss (barrel file)
@forward 'variables';
@forward 'mixins';
@forward 'functions';

// main.scss
@use 'index';

// Override defaults
@use 'library' with (
  $primary: #22c55e,
  $border-radius: 8px
);