Cheatsheet

SASS

Variables

Declare & useCopy
$red: #833

body
  color: $red
iSave a value once and reuse it everywhere by name, instead of retyping it (or having to change it in a dozen places later).
Default valuesCopy
$padding: 10px !default
iGives a variable a fallback value that's only used if nothing else has already set it — handy for letting others customize a shared style file.
Scope (!global)Copy
$color: blue

.scoped
  $color: red !global
  color: $color
iNormally a variable set inside a block only exists there. This forces the change to also update the version outside that block.

Nesting

Selector nestingCopy
.markdown-body
  a
    color: blue

    &:hover
      color: red
iLets you write child styles inside their parent style, matching the shape of your HTML instead of repeating the parent name every time.
Parent selector (&)Copy
.btn
  &--primary
    background: blue

  &.is-active
    font-weight: bold
iA stand-in for "the style I'm nested inside", used to add hover states or variant styles without repeating the base name.
Property nestingCopy
font
  family: sans-serif
  size: 14px
  weight: bold
iGroups related settings that share a common prefix, like all the font-related properties, under one shared heading.

Comments

Block & line commentsCopy
/* Kept in compiled CSS */
// Stripped from output
i/* */ comments show up in your final CSS file; // comments are just notes for yourself and get removed automatically.

Mixins

Basic mixinCopy
=heading-font
  font-family: sans-serif
  font-weight: bold

h1
  +heading-font
iA reusable chunk of styles you can drop into any selector, so you're not copy-pasting the same rules everywhere.
With parametersCopy
=font-size($n)
  font-size: $n * 1.2em

p
  +font-size(2)
iA mixin that can take input values, so the same reusable chunk of styles can look slightly different each time you use it.
With default valuesCopy
=pad($n: 10px)
  padding: $n

.box
  +pad
iA mixin input that already has a fallback value, so you don't have to provide one every time you use it.

Functions

Custom functionCopy
@function pow($base, $exp)
  $result: 1
  @for $_ from 1 through $exp
    $result: $result * $base
  @return $result

width: pow(2, 3) * 1px
iA reusable calculation you define yourself, which gives back a value (unlike a mixin, which outputs styles directly).

Extend & Placeholders

Extend a classCopy
.button
  padding: 10px

.push-button
  @extend .button
iMakes one style automatically pick up everything from another style, without you having to repeat any properties.
Placeholder selectorCopy
%button-base
  padding: 10px
  border-radius: 4px

.btn-primary
  @extend %button-base
iA style that's only meant to be borrowed by other styles — it never shows up in your CSS on its own.

Partials & Modules

@use / @forwardCopy
@use './colors'
@forward './buttons'
iThe current recommended way to split your styles across multiple files and share variables/mixins between them cleanly.
@import (legacy)Copy
@import './other_sass_file'
iThe older way to combine styles from multiple files. Being phased out because it can cause naming conflicts between files.

Interpolation

In selectors / propertiesCopy
$name: warning

.alert-#{$name}
  border: 1px solid red
iLets you drop a variable's value directly into a class name or property name, instead of only into a plain value.

Conditionals

@if / @elseCopy
@mixin text($size)
  @if $size == large
    font-size: 20px
  @else if $size == medium
    font-size: 16px
  @else
    font-size: 12px
iChooses which styles to include based on a condition — decided once when the styles are put together, not something that changes per visitor.

Loops

@forCopy
@for $i from 1 through 4
  .col-#{$i}
    width: 25% * $i
iRepeats a block of styles a set number of times — useful for generating a series of similar classes, like a spacing scale.
@each (list)Copy
@each $item in flex, grid, block
  .display-#{$item}
    display: $item
iRepeats a block of styles once for every item in a list.
@each (map)Copy
@each $name, $color in (primary: blue, danger: red)
  .text-#{$name}
    color: $color
iRepeats a block of styles once for every pair in a set of named values, giving you both the name and the value each time.
@whileCopy
$i: 6
@while $i > 0
  .w-#{$i}
    width: 10px * $i
  $i: $i - 1
iRepeats a block of styles for as long as a condition stays true.

Lists & Maps

ListsCopy
$sizes: 12px, 16px, 24px
length($sizes)
nth($sizes, 2)
iA group of values separated by commas or spaces — you can count how many there are, or grab one out by its position.
MapsCopy
$breakpoints: (sm: 576px, md: 768px, lg: 992px)
map-get($breakpoints, md)
iA group of named values you can look up by name, like a small settings table.

Built-in Functions

ColorCopy
darken($color, 10%)
lighten($color, 10%)
saturate($color, 20%)
mix($a, $b, 50%)
rgba($color, .5)
iReady-made tools for adjusting a color — making it lighter, darker, more vivid, blended with another color, or partly see-through.
StringCopy
to-upper-case($s)
str-length($s)
str-slice($s, 1, 3)
iReady-made tools for working with text, like changing its capitalization or measuring/cutting a piece of it.
NumberCopy
round(3.4)
ceil(3.1)
floor(3.9)
percentage(0.5)
iReady-made tools for rounding numbers, or turning a decimal into a percentage.
IntrospectionCopy
variable-exists($name)
mixin-exists($name)
function-exists($name)
iReady-made tools that let you check whether something (a variable, mixin, or function) already exists before you try to use it.
What is this Cheatsheet?

A quick reference for modern CSS, SASS, SCSS, Pug, and React syntax. Switch between tabs to browse selectors, layout, hooks, and more. Click any snippet to copy it, or hover the info icon for an explanation.