SASS Cheatsheet

AD, please don't block.

Time ago I started working with SASS, with the SCSS syntax. It’s not difficult at all, and if you learned CSS, well, you could learn SASS.

Before you could start using SASS, you have to install Ruby, and SASS of course. The installation is easy, and the official site is the optimal resource from where to start. You will complete this task in less than five minutes.

One of the first thing I wanted was some kind of SASS cheat sheet; so I summarized in a .scss file the main features of SASS. Basing on the existing documentation on the official website, I produced this SCSS file:

Variables

Sass allows you to declare variables that can be used throughout your stylesheet.

Variables begin with $ and are declared just like properties.

They can have any value that’s allowed for a CSS property, such as colors, numbers (with units), or text.

/*
* Sass allows you to declare variables that can be used
* throughout your stylesheet.
* Variables begin with $ and are declared just like properties.
* They can have any value that's allowed for a CSS property,
* such as colors, numbers (with units), or text.
*/

$defaultWindowSize: 960px;
$defaultLinkColor: #46EAC2;

a {
  color: $defaultLinkColor;
}

Nesting blocks

Often when writing CSS, you’ll have several selectors, that all begin with the same thing. Sass allows you to avoid this by nesting the child selectors within the parent selector. It’s possible to nest also pseudoclass selectors.

The special character & references the parent selector.

/*
* Often when writing CSS, you'll have several selectors,
* that all begin with the same thing.
* Sass allows you to avoid this by nesting the child selectors
* within the parent selector.
* It's possible to nest also pseudoclass selectors.
* The special character & references the parent selector.
*/

ul {
  list-style-type: none;  
  li {
    border: {
      style: solid;
      left: {
        width: 1px;
        color: #999999;
      }
    }
    display: inline-block;
    margin: 0;
    padding: 0 5px;
    a {
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }
  }
}

Operations and Functions

SASS has also a number of predefined functions.

/*
* It's also possible to use predefined functions.
* This allows you to compute element sizing and even
* coloration dynamically.
* All the available functions:
* http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
*/

#nav.side {
  float: right;
  width: $defaultWindowSize / 3;
  a {
    color: lighten($defaultLinkColor, 10%);
  }
}

Interpolation

Variables can be used for more than just property values. You can use \#{variable} to insert them into property names or selectors.

/*
* Variables can be used for more than just property values.
* You can use \#{variable} to insert them into
* property names or selectors.
*/

$wk: -webkit-;

.rounded-box {
  #{$wk}border-radius: 4px;
}

Mixin

Mixins allow re-use of styles without having to copy and paste them or move them into a non-semantic class.

Mixins are defined using the @mixin directive, which takes a block of styles that can then be included in another selector using the @include directive.

/*
* Mixins are one of the most powerful Sass features.
* They allow re-use of styles without having to copy
* and paste them or move them into a non-semantic class.
* Mixins are defined using the “@mixin” directive, which
* takes a block of styles that can then be included in
* another selector using the “@include” directive.
*/

@mixin default-box {
  $borderColor: #333;
  /* $borderColor could be used only
    in the scope of the default-box block; */
  border: 1px solid $borderColor;
  clear: both;
  display: block;
  margin: 5px 0;
  padding: 5px 10px;
}

footer, header{ @include default-box; }

Arguments

The real power of mixins comes when you pass them arguments. Arguments are declared as a parenthesized, comma-separated list of variables. Each of those variables is assigned a value each time the mixin is used.

/*
* The real power of mixins comes when you pass them arguments.
* Arguments are declared as a parenthesized, comma-separated
* list of variables.
* Each of those variables is assigned a value each time the
* mixin is used.
*/

@mixin default-box($color, $boxModel, $padding) {
  border: 1px solid $color;
  clear: both;
  display: $boxModel;
  margin: 5px 0;
  padding: 5px $padding;
}

header{ @include default-box(#333, block, 10px); }
footer{ @include default-box(#999, inline-block, 5px); }

Selector Inheritance

Sass, using the @extend directive, can tell one selector to inherit all the styles of another without duplicating the CSS properties.

/*
* Sass, using the @extend directive, can tell one selector
* to inherit all the styles of another without duplicating
* the CSS properties.
*/

.error {
  border: 1px #f00;
  background: #fdd;
}

.badError {
  @extend .error;
  border-width: 3px;
}

Import stylesheet

CSS has an @import directive that allows you to break your styles up into multiple stylesheets. Any style rules, variables or mixins defined in @imported files are available to the files that import them.

/*
* CSS has an @import directive that allows you to break
* your styles up into multiple stylesheets.
* Any style rules, variables or mixins defined in
* @imported files are available to the files that import
* them.
* Sass has a naming convention for files that are meant to
* be imported (called “partials”): they begin with an
* underscore.
* In order to support both .scss and .sass files, Sass
* allows files to be imported without specifying a file
* extension.
*/

@import "partials/_vars";

body {
  color: $color;
}

To compile the code simply use:

sass --watch style.scss:style.css

or to watch all the files in a directory:

sass --watch stylesheets/sass:stylesheets/compiled

If you don’t want to mess your mind with this different style of writing CSS, you could still continue to write your classic CSS rules in a .scss file and use the SASS engine to get the correspondent CSS. Why?

Because, by setting the right options, you could use the SASS engine to minimize your CSS.

sass --style {nested | expanded | compact | compressed}
  --watch path/sass:path/compiled

I leave to you the test of how the use of these different keywords changes the output. If you have not much time, you could find this answer, and much more, on the official reference page.