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}"); }}

Sequenz by Kilotype

Advertise here ↑