SCSS Cheat Sheet

// Single line comment

/* Multi-line
   comment */

@import 'variables';
@import 'mixins';

.nav {
  background: blue;
  
  a {
    color: white;
    
    &:hover {
      color: yellow;
    }
  }
}

.button {
  &:hover { }
  &.active { }
  &--large { }  // BEM
}

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
$base-spacing: 1rem;

.header {
  color: $primary-color;
  font-family: $font-stack;
  padding: $base-spacing;
}

$global: red;

.block {
  $local: blue;  // Only in .block
  color: $local;
}

$color: blue !default;
// Won't override if already set

$name: "primary";

.alert-#{$name} {
  color: red;
}

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

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

@mixin box-shadow($x: 0, $y: 2px, $blur: 4px) {
  box-shadow: $x $y $blur rgba(0,0,0,0.3);
}

@mixin respond-to($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

.container {
  @include respond-to(768px) {
    width: 750px;
  }
}

darken($color, 10%);
lighten($color, 10%);
saturate($color, 20%);
desaturate($color, 20%);
alpha($color);

percentage(0.5);  // 50%
round(10.6);      // 11
ceil(10.1);       // 11
floor(10.9);      // 10
abs(-10);         // 10

@function calculate-rem($px) {
  @return $px / 16px * 1rem;
}

.text {
  font-size: calculate-rem(18px);
}

quote("hello");        // "hello"
unquote("hello");      // hello
str-length("hello");   // 5
to-upper-case("hi");   // HI

.error {
  border: 1px red;
  background: #fdd;
}

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

%button-base {
  padding: 10px;
  border: none;
}

.btn-primary {
  @extend %button-base;
  background: blue;
}

width: 100% / 3;
height: $base-height + 20px;
margin: $spacing * 2;
padding: $value - 10px;

@if $width > 1000px {
  width: 100%;
} @else {
  width: 90%;
}

@if $theme == "dark" and $high-contrast {
  color: white;
}

@if $theme == "dark" {
  background: black;
} @else if $theme == "light" {
  background: white;
} @else {
  background: gray;
}

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

@each $color in red, green, blue {
  .#{$color}-text {
    color: $color;
  }
}

$sizes: (small: 12px, medium: 16px, large: 20px);

@each $name, $size in $sizes {
  .text-#{$name} {
    font-size: $size;
  }
}

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

color: map-get($colors, primary);

// Or with module system
color: map.get($colors, primary);

$fonts: Helvetica, Arial, sans-serif;
$sizes: 10px 20px 30px;

length($fonts);       // 3
nth($fonts, 1);       // Helvetica
append($fonts, Monaco);