sass cheatsheet

sass_cheatsheet.scss

Comments

/* Block comments */
// Line comments

// Variables

$red: #833;
body {
  color: $red;
}

// Nesting

.markdown-body {
  p {
    color: blue;
  }

  &:hover {
    color: red;
  }
}

// Mixins

@mixin heading-font {
  font-family: sans-serif;
  font-weight: bold;
}
h1 {
  @include heading-font;
}
with parameters
@mixin font-size($n) {
  font-size: $n * 1.2em;
}
body {
  @include font-size(2);
}
with default values
@mixin pad($n: 10px) {
  padding: $n;
}
body {
  @include pad(15px);
}
with a default variable
// Set a default value
$default-padding: 10px;
@mixin pad($n: $default-padding) {
  padding: $n;
}
body {
  @include pad(15px);
}

// Composing

@import './other_sass_file`;

// For loops

@for $i from 1 through 4 {
  .item-#{$i} { left: 20px * $i; }
}

// Conditionals

@if $position == 'left' {
   position: absolute;
   left: 0;
}
@else {
   position: static;
}