Sass Cheatsheet

sass --watch sass:css

// I will not show when compiled

/* I will be shown when compiled */

@import 'foo';

$foo: #000 !default;
$bar: baz qux quux corge;

.foo  {
  .bar {
    // .foo .bar { }
  }
}

.foo {
  text: {
    align: center; // .foo { text-align: center; }
  }
}

a {
  &:hover {
    // a:hover { }
  }
}

.bar {
 .foo & {
   // .foo .bar { }
  }
}

$foo: bar;

.baz-#{$foo} {
  // .baz-bar { }
}

$foo: 'serif';

.bar {
	$font: 'sans-' + $foo; // 'sans-serif'
}

@mixin foo($bar, $baz: false) {
  color: $bar;
  @if baz {
    border-radius: $baz;
  }
}

.qux {
  @include foo(#000, 10px);
}

@mixin bar($baz...) {
  box-shadow: $baz
}

.qux {
  $baz: 0px 4px 5px #666, 2px 6px 10px #999;
  @include bar($baz);
}

%foo {
 color: #000;
}

.bar {
  background: #fff;
}

.baz {
  @extend %foo; // color: #000
  @extend %qux !optional; // fail silenty if not found
  @extend .bar; // background: #fff
}

$foo: bar;

.qux {
  @if $foo == bar {
     color: #000;
  } @else if $foo == baz {
    color: #fff;
   } @else {
     color: #999;
   }
}

.qux {
	color: if($foo == bar, #000, #999); // if([condition], [if true], [else])
}

$foo: "foo";
$bar: "bar";
$qux: "qux";

@if ($foo == "foo" and not ($bar == "bar")) or ($qux == "qux") {
  // second condition is true
}

$foo: bar baz qux;

@each $f in $foo {
	.quux-#{$f} {
		background: url(quux-#{$f}.png); // .quux-bar { background: url(quux-bar.png) }
	}
}

.qux {
	@for $i from 1 through 5 {
		&.qux-#{$i} {
			// .qux.qux-1 { }
		}
	}
}

$i: 1;

.qux {
	@while $i <= 5 {
		&.qux-#{$i} {
			// .qux.qux-1 { }
		}

		$i: $i + 1;
	}
}

@function foo($bar, $baz) {
	@return ($bar / $baz);
}

.qux {
	width: foo(10px, 2px); // 5px
}

$foo: bar baz qux quux;
$grault: garphly, waldo, fred, plugh;

length($foo); // 4 (index starts at 1)
append($foo, corge); // bar baz qux quux corge (does not alter original)
join($foo, $grault); // bar baz qux quux garphly, waldo, fred, plugh
index($foo, baz); // 2
nth($foo, 2); // baz
zip($foo, $grault); // [bar garphly] [baz waldo] [qux fred] [quux plugh]

$users: foo bar;
$colors: blue green;
$style: zip($names, $colors); // [foo blue] [bar green]
@each $u in $style {
  .users-#{nth($u, 1)} {      // .users-foo { }
    background: nth($u, 2);   // background: blue;
  }
 }

$foo: #ff0000;

rgba($foo, 0.8); // rgba(0, 255, 0, 0.8)
lighten($foo, 20%); // #66ff66
darken($foo, 20%); // #009900
saturate($foo, 20%); // lime
desaturate($foo, 20%); // #19e619
mix(#ff0000, #0000ff); // #7f007f
mix(#ffff00, #0000ff, 20%); // #3300cc (3rd parameter is percentage of first color)
grayscale($foo); // grey
invert($foo); // magenta
complement($foo); // magenta
scale_color($foo, $lightness: 20%); // #33ff33
scale_color($foo, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]); // changes color aspect(s) relative, rather than linearly, to the start value

$foo: 1.4;
$bar: 1.3 4.5 -2.8;

round($foo;) // 1
ceil($foo); // 2
floor($foo); // 1
abs($foo); // 1.4
percentage($foo) // 140%
min($bar...) // -2.8
max($bar...) // 4.5

.foo {
	@media (min-width: 768px) {
	  // @media (min-width: 768px) { .foo { } }
	}
}

@mixin respond-to($media) {
	@if $media == desktop {
		@media (min-width: 960px) {
			@content;
    	}
    } @else if $media == tablet {
    	@media (min-width: 768px) {
      		@content;
    	}
  	}
}

.foo {
	@inclue respond-to(tablet) {
		// @media (min-width: 768px) { .foo { } }
	}
}