Quick Sass Cheat Sheet

Sass is a powerful CSS pre-processor. I don’t use every feature Sass offers. I only use the ones that speed up my CSS workflow.

// Sass command line
sass --watch /location/style.scss: /location/style.css --style compressed

// comment
/*!This comment will be in the compiled CSS even when compressed.*/

// import
@import “normalize”;

// Variables
$body_text: Helvetica , Arial, sans-serif;

// Variable inside variable
$highlight-color: #000;
$highlight-border: 1px $hightlight-color solid;
.select {border: $highlight-border;}

// Parent reference with &
article a {color: blue;
&:hover {color:red;} }

// Nested group
.container {h1, h2, h3 {margin: 1em;} }

// Extend
.error {color:red;}
.seriousError {@extend .error;
font-weight: bold; }

// Placeholder
%dark {color: #fff; background: #000;}
.button {@extend %dark;}

// Function to covert px to em
@function calc-em($target-px, $context) {
@return ($target-px / $context) * 1em;}
h1 {font-size: calc-em(30px, 16px);

// Operators
.container { width: 100%; }
.main {float: left; width: 600px / 960px * 100%;}

// Map control directive
$map: (twitter: “twitter.png”, facebook: “facebook.png“);
@each $network, $image in $map {.icon-#{$network} {
background: image-url(“icons/#{$image}"); }}