glunty

Sass and SCSS Cheat Sheet

A searchable reference of Sass and SCSS syntax and what each piece does.

Syntax What it does
$primary: #3498db; Declare a variable that holds a reusable value such as a color.
color: $primary; Use a variable as the value of a CSS property.
$radius: 4px !default; Set a variable only if it has no value yet, which lets library users override it.
.card { $pad: 1rem; } A variable declared inside a block stays local to that block by default.
$pad: 1rem !global; Assign to the global variable from inside a block instead of making a local one.
$theme: (bg: #fff, text: #222); Store related values as key-value pairs in a map.
$sizes: 10px 20px 30px; Store an ordered list of values separated by spaces or commas.
.card { .title { font-size: 2rem; } } Nest a rule inside another so .title compiles to .card .title.
a { &:hover { color: red; } } The ampersand is the parent selector, here producing a:hover.
.btn { &.is-active { color: blue; } } Attach a modifier to the parent so it compiles to .btn.is-active.
.icon { &--large { width: 2rem; } } Build a BEM style name where the ampersand plus a suffix becomes .icon--large.
font: { weight: bold; size: 14px; } Nest properties that share the font prefix instead of repeating it.
.title { .dark & { color: white; } } Place the parent after another selector so it compiles to .dark .title.
@mixin flex-center { display: flex; } Define a reusable block of declarations named flex-center.
.box { @include flex-center; } Insert the declarations from a mixin into a rule.
@mixin pad($x) { padding: $x; } Define a mixin that accepts a value when it is included.
@include pad(1rem); Call a mixin and pass a value for its parameter.
@mixin pad($x: 1rem) { padding: $x; } Give a parameter a fallback used when no value is passed.
@mixin phone { @media (max-width: 40rem) { @content; } } Let the caller inject extra rules where the content directive appears.
@include phone { display: none; } Pass a block of rules into a mixin that uses the content directive.
@function double($n) { @return $n * 2; } Define a custom function that returns a computed value.
@return $n * 2; Send a value back from a function to whoever called it.
width: double(20px); Use a function to compute a property value.
color.adjust($c, $lightness: -10%) Darken a color; replaces the deprecated global darken and lighten functions.
rgba($primary, 0.5) Produce a semi-transparent version of a color.
math.div($width, 2) Divide two numbers; the modern replacement for the slash division operator.
percentage(0.4) Convert a unitless fraction into a percentage value, here 40 percent.
map.get($theme, bg) Read the value stored under a key in a map.
@if $x > 0 { color: red; } @else { color: blue; } Choose a block of rules based on whether a condition is true.
@else if $x == 0 { color: gray; } Test another condition when the first branch fails.
@each $c in red, green, blue { } Repeat a block once for each item in a list.
@each $key, $val in $theme { } Loop over a map, binding both the key and the value.
@for $i from 1 through 3 { } Repeat a block a fixed number of times.
@while $i > 0 { $i: $i - 1; } Repeat a block while a condition stays true.
@mixin theme($dark) { @if $dark { background: #000; } } Use a conditional inside a mixin to branch on an argument.
@use "sass:math"; Load a built-in or local module and reach its members through a namespace.
@use "buttons" as btn; Load a file under a custom namespace of your choosing.
@use "buttons" as *; Load a file so its members are available without any namespace prefix.
@forward "buttons"; Re-export another module so one entry point exposes its members.
@import "buttons"; The old way to include a file; deprecated in Dart Sass in favor of the use rule.
_buttons.scss A file whose name starts with an underscore is a partial, compiled only when it is used.
.btn { @extend %base; } Inherit the rules of a placeholder selector defined with a percent sign.
%base { padding: 1rem; } Define a placeholder that outputs nothing until something extends it.
.a { @at-root .b { color: red; } } Move a nested rule back to the top level of the output.

Runs entirely in your browser. Nothing you type is sent anywhere; open DevTools and watch the Network tab to verify zero requests.

What this tool does

This is a searchable quick reference for Sass and SCSS syntax, from declaring variables and nesting selectors to writing mixins, functions, control flow, and the modern module rules. Each row pairs a small piece of real SCSS with a plain-English note on what it does. Type in the filter box to search across both columns, or tap a category button to focus on one area. The whole list is built into the page, so it works offline and sends nothing anywhere.

How to use it

Start typing in the Filter box. Entering mixin surfaces the rules for defining and including reusable blocks; entering @each or @for shows the loops; entering map finds the map helpers. The category buttons (Variables, Nesting, Mixins, Functions, Control flow, Modules) narrow the table to one family and combine with the text filter, so you can pick Modules and type @use to zero in on the module system. Clear the box to see the full sheet again.

Common use cases

  • Recalling the exact form of a rule you use rarely, like @forward or @extend.
  • Copying a correct snippet into your stylesheet instead of guessing the syntax.
  • Teaching a teammate the difference between a mixin, a function, and a placeholder selector.
  • Migrating an old codebase from @import to the modern @use and @forward rules.
  • Reviewing core Sass features before an interview or a new project.

Common pitfalls

  • Using @import in new code. The @import rule is deprecated in Dart Sass. Prefer @use, which scopes each file behind a namespace and avoids the naming clashes that global imports cause.
  • Reaching for darken and lighten. These global color functions are deprecated. Load the sass:color module and use color.adjust or color.scale instead.
  • Dividing with a slash. The slash as a division operator is removed in modern Dart Sass. Use math.div from the sass:math module to divide numbers.
  • Forgetting the partial underscore. A file loaded by @use should be named with a leading underscore and referenced without it, so _buttons.scss is loaded as buttons.

Frequently asked questions

What is the difference between Sass and SCSS?
They are two syntaxes for the same language. SCSS is the newer and most common syntax; it is a superset of CSS that uses braces and semicolons, so any valid CSS file is also valid SCSS. The original indented syntax, called Sass, drops the braces and semicolons and relies on indentation instead. Both compile to the same CSS, and this cheat sheet uses SCSS.
What does the ampersand do in Sass?
The ampersand is the parent selector. Inside a nested rule it stands in for the full selector of the enclosing block, so placing it before a pseudo-class or a modifier attaches that suffix to the parent instead of creating a descendant rule. It is how you build states like hover and BEM style modifier classes without repeating the parent name.
What is a mixin in Sass?
A mixin is a named, reusable block of styles that you define once and then drop into any rule with an include. Mixins can take arguments, so one definition can output different results, and they can accept a content block that the caller fills in. They are the main way to avoid repeating groups of declarations across your stylesheets.
What is the difference between a mixin and a function?
A mixin outputs one or more CSS declarations that get injected where you include it, while a function returns a single value that you use inside a declaration. Reach for a mixin when you want to stamp out rules, and a function when you want to compute a number, color, or string. Functions use a return statement; mixins do not.
Should I use @use or @import in Sass?
Prefer @use. The older @import rule is deprecated in Dart Sass because it dumps everything into one global namespace, which causes naming clashes and slower builds. The @use rule loads a file once, keeps its variables and mixins behind a namespace, and makes dependencies explicit. Pair it with @forward when you want a single file to re-export several modules.
Does this cheat sheet send my searches anywhere?
No. The whole syntax list is baked into the page and every search and filter runs in your browser with JavaScript, so nothing you type leaves your device. Open your browser DevTools and watch the Network tab while you search to confirm there are zero requests.

Embed this tool

Free for any use; attribution appreciated. Paste this on your site:

The embed runs the same tool that lives at this URL. No tracking; no ads inside the embed. Resize height as needed for your layout.

Cite this tool

For academic, journalistic, or technical references. Pick a format:

Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.

Embedded tool from glunty.com