SCSS Cheatsheet

Variables

Store reusable values like colors, fonts, or dimensions. Variables start with $.

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

Target elements inside other elements using a visual hierarchy that mirrors your HTML.

• & — References the parent selector.

nav {
  ul {
    margin: 0;
    padding: 0;
  }
  a {
    color: black;
    &:hover {
      color: blue;
    }
  }
}

Partials & Modules

Split your CSS into smaller, reusable files.

• Partials: Files starting with _ (e.g., _base.scss) aren't compiled into separate CSS files.
• @use — Loads a module, namespace members by filename.
• @forward — Makes a module available when your file is used.

// _base.scss
$font-stack: Helvetica, sans-serif;

// styles.scss
@use 'base';

body {
  font: 100% base.$font-stack;
}

Mixins

Reusable blocks of styles that can accept arguments.

• @mixin name($arg) — Defines a mixin.
• @include name($val) — Uses the mixin.

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme($theme: DarkGray);
}
.alert {
  @include theme($theme: DarkRed);
}

Extend / Inheritance

Share a set of CSS properties from one selector to another.

• @extend .class — Inherits styles from .class.
• %placeholder — A special type of class that only prints when extended.

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

Operators & Math

Perform calculations inside your CSS.

• +, -, *, /, % — Standard arithmetic.
• math.div(a, b) — Division (standard / is reserved for CSS).

@use "sass:math";

.container {
  width: math.div(600px, 960px) * 100%;
  margin-left: 20px + 5px;
}

Control Directives

Write complex logic directly in your stylesheet.

• @if / @else — Conditional rendering.
• @for — Loops (from X through Y).
• @each — Loops over a list or map.

@each $theme in red, green, blue {
  .btn-#{$theme} {
    background-color: $theme;
  }
}

@for $i from 1 through 3 {
  .col-#{$i} { width: 100px * $i; }
}