iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Cheatsheet

By · Reviewed & last updated · Part of Sass Tutorial

A one-page distillation of the SCSS features that pay for themselves daily: variables, nesting, mixins, functions, math, maps, control directives, and modules. Bookmark this and you can author maintainable SCSS without leafing through the spec each time.

SCSS features you actually use

EXAMPLE
// 1) Variables and nesting
$primary: #2563eb;
$radius: 6px;

.card {
  background: white;
  border-radius: $radius;
  &:hover { background: lighten($primary, 45%); }
  & > .title { font-weight: 600; }
  &.is-disabled > * { opacity: .4; pointer-events: none; }
}

// 2) Mixins with arguments and content blocks
@mixin button($bg, $fg: white) {
  display: inline-flex; align-items: center;
  padding: .5rem 1rem; border-radius: $radius;
  background: $bg; color: $fg;
  &:disabled { opacity: .5; cursor: not-allowed; }
}

@mixin hover-only { @media (hover: hover) { &:hover { @content; } } }

.btn-primary { @include button($primary); }
.btn-link    { @include button(transparent, $primary); }
.btn-primary { @include hover-only { background: darken($primary, 10%); } }

// 3) Functions — return a value
@function px-to-rem($px, $base: 16) { @return $px / $base * 1rem; }
.title { font-size: px-to-rem(20); }   // 1.25rem

// 4) Math, math.div in modern Dart Sass
@use 'sass:math';
.spacer { margin: math.div($radius, 2); }

// 5) Maps — design tokens as data
$space: (
  'xs': .25rem, 'sm': .5rem, 'md': 1rem, 'lg': 2rem, 'xl': 4rem,
);
@each $name, $value in $space {
  .p-#{$name} { padding: $value; }
  .m-#{$name} { margin: $value; }
}

// 6) Control: if/else, for, while
@for $i from 1 through 6 {
  .h\#{$i} { font-size: 2.5rem - $i * .25rem; }
}

@if length($space) > 5 { /* compile-time guard */ }

// 7) Modules — replace @import with @use / @forward
// _tokens.scss
$primary: #2563eb !default;
@function px-to-rem($px) { @return $px / 16 * 1rem; }

// styles.scss
@use 'tokens';                // namespaced: tokens.$primary
@use 'tokens' as t;           // alias
@use 'tokens' as *;           // no namespace (use sparingly)
.card { color: t.$primary; }

// 8) Placeholder selectors (%) — extend without bloating output
%card-base { padding: 1rem; border-radius: $radius; }
.callout, .alert, .toast { @extend %card-base; }

Why it matters

Move to @use / @forward and away from @import — @import is deprecated, leaks every variable into the global namespace, and breaks once your file structure grows past a handful of partials. @use forces explicit namespaces, which is the actual scaling property.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// vars, nesting, &, @use, @forward, @mixin, @include, @extend, @if, @for, @each, math.div, color.scale
Try it Yourself »

Discussion

Loading…