Sass Cheatsheet

This site does not allow itself to be embedded. You can still read it on the original site — the toolbar below keeps your place in the directory.

A Sass cheatsheet. Watching sass --watch sass:css source Comments // I will not show when compiled /* I will be shown when compiled */ source Imports @ import 'foo' ; source Variables $ foo : # 000 ! default ; $ bar : baz qux quux corge ; source Nesting Selector nesting . foo { .bar { // .foo .bar { } } } source Property nesting . foo { text: { align : center ; // .foo { text-align : center ; } }…

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 { }
}

Read on miguelmota.com ↗