SCSS Short Reference / Cheatsheet

Published:

SCSS is a a more powerful CSS source format. SCSS is the current, newer syntax of the SASS preprocessor (SASS being the previous syntax without parentheses).

Variables prefixed with $

$primary-color: #333;
body {
  color: $primary-color;
}

Nesting

html {
    body {
        color: $primary-color;
    }
}

Parent selector is &. ref

.alert {
  &:hover {
    font-weight: bold;
  }
}

Operators +, -, *, /, and %

article {
    width: 600px / 960px * 100%;
}

Mixins defined with @mixin

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

Partials prefixed with underscore _ and used with @import or @use

Filename begin with an underscore _partialname.scss. They are used with @use.

Placeholders with prefix %

.alert:hover, %strong-alert {
  font-weight: bold;
}

%strong-alert:hover {
  color: red;
}

Extend/Inheritance

%message-shared {
  border: 1px solid #ccc;
}
.message {
  @extend %message-shared;
}
.success {
  @extend %message-shared;
  border-color: green;
}
.error {
  @extend %message-shared;
  border-color: red;
}
.warning {
  @extend %message-shared;
  border-color: yellow;
}

Also works with normal rules.

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

Modules (namespaced imports with @use)

Only supported in Dart SASS(?)

you can refer to its variables, mixins, and functions under the namespace

// import module `base` accessible under namespace `base` (filename)
@use 'base';
.inverse {
  background-color: base.$primary-color;
  color: inherit;
}

@if and @each, @for, @while

Operators

  • == and !=
  • <, <=, >, and >=
  • and, or, and not
  • string concat +, -, and /
  • (, )

Map ("key": value, "key2": value2)

// map
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

List (value1 value2 value3)

separated by commas (Helvetica, Arial, sans-serif) or by spaces (10px 15px 0 0)

@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

https://sass-lang.com/documentation/values/maps https://sass-lang.com/documentation/values/lists

@at-root

Functions @function

Use mixins for side-effects, and use functions just to compute values.

https://sass-lang.com/documentation/at-rules/function

Reference