SCSS (Sass) Cheat Sheet

Here’s a cheat sheet for SCSS (Sass), a popular extension of CSS:

Variables

$primary-color: #3498db;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

Nesting

nav {
  background: #333;

  ul {
    list-style-type: none;

    li {
      display: inline-block;
    }
  }
}

Partials

// _variables.scss
$primary-color: #3498db;
$font-size: 16px;

// main.scss
@import 'variables';

body {
  color: $primary-color;
  font-size: $font-size;
}

Mixins

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

Extend/Inheritance

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

  &.alert {
    color: #c00;
  }
}

Operators

.container {
  width: 100%;
  margin: 0 auto;

  article {
    width: 60%;
    float: left;
  }

  aside {
    width: 40%;
    float: right;
  }
}

Conditionals

$text-color: red;

button {
  @if $text-color == red {
    background-color: blue;
  } @else {
    background-color: red;
  }
}

Loops

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

Functions

@function calculate-width($cols) {
  @return 100px * $cols;
}

.column {
  width: calculate-width(3);
}

Importing CSS Files

@import 'reset.css';
@import 'base';
@import 'components/buttons';

Comments

// Single-line comment

/*
 * Multi-line
 * comment
 */

CSS Output Style

// Output styles: nested, expanded, compact, compressed
$ sass --watch input.scss:output.css --style compressed

Placeholder Selectors

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

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

.error {
  @extend %message-shared;
  border-color: red;
}

This SCSS cheat sheet covers some essential features. Always refer to the official Sass documentation for comprehensive details and updates.