Quick Reference for Your Favorite Language

What is Sass?

Sass is an extension language that brings powerful features that you can use with your CSS.

Who is this page for?

This page is for the experienced CSS users who want to quickly learn Sass and add it to their toolbelt, or for the ones who already know Sass and want a quick memory refresher.

Installing Sass

This command will install Sass on macOS via Command Line. For other OS's see instructions here.

								     
### Installing SASS
$ sudo gem install sass

### Check installed version
$ sass -v

### Update to latest version
$ sudo gem update sass
								    
								

Convert & Watch

To use your Sass file with your website you must first compile (convert) it to CSS. You can also "watch" files so Sass will automatically compile changed files.

								    
### Convert SASS to CSS
$ sass file_X.scss:file_Y.css

### Watch files
$ sass --watch file.scss:file.css

### Watch directories
$ sass --watch dir_scss:dir_css
							    
								

Comments

Single line comments are removed at compilation in the CSS file. Multiline comments are not removed, only for compressed style format which you also can override with "!".

								    
// Single
// Line
// Comments

/* Multi line comment that will appear in the final css file */

/*! Multi line comment that will appear in the final .css file. even in compressed style. */
								    
								
								    
/* Multi line comment that will appear in the final css file */
	   
/*! Multi line comment that will appear in the final .css file. even in compressed style. */
									
								

Output Style

It works by passing the --style flag along with one of the options "nested", "expanded", "compact" or "compressed" to the "sass" command line interface tool. Example: sass file.scss:file.css --style compressed.

								    
// Nested -default

ul {
  margin: 20px 0;
  padding: 20px 0; }
  ul li {
    font-size: 2em;
    line-height: 1.4; }
    ul li p {
      color: #FFF; }


// Expanded

ul {
  margin: 20px 0;
  padding: 20px 0;
}
 
ul li {
  font-size: 2em;
  line-height: 1.4;
}
 
ul li p {
  color: #FFF;
}


// Compact

ul li { font-size: 2em; line-height: 1.4; }
ul li p { color: #FFF; }


// Compressed

ul{margin:20px 0;padding:20px 0;}ul li{font-size:2em;line-height:1.4;}ul li p{color:#FFF;}
								    
								

Nesting

To create visual hierarchy and avoid repetition you nest CSS selectors in a way similar to how HTML looks.

								    
nav {

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    li {
        display: inline-block;
    } 
}


// You can also nest namespace properties

header[role="banner"] h1 {
  padding: 15px 0;
  font: {
    size: 54px;
    family: Jubilat, Georgia, serif;
    weight: bold;
  }
  line-height: 1;
}
								    
								
								    
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}


// You can also nest namespace properties

header[role="banner"] h1 {
  padding: 15px 0;
  font-size: 54px;
  font-family: Jubilat, Georgia, serif;
  font-weight: bold;
  line-height: 1;
}
									
								

Importing & Partials

Partials are a way of separating/grouping Sass code into different files for easier management of the code.

								    
// Partial files start with a "_": _partial.scss

// You import a partial with:
@import 'partial';
								    
								

Variables

One of the best features of Sass are variables, because they are reusable blocks of values.

								    
// Usage: $css-property: value;


$primary-color: #333;

body {
    color: $primary-color;
}

div {
    border-color: $primary-color;
}
								    
								
								    
body {
  color: #333;
}

div {
  border-color: #333;
}

									
								

Mixins

You can use mixins with variables as arguments or with absolute values. Mixins are reusable blocks of style. Tip: You can create a _mixin.scss file with your favorite most useful mixins so you can reuse it on other project. You can also use a already existing mixin library like Compass or Bourbon.

								    
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }


// Multiple arguments even with default arguments

@mixin title-style($color, $background: #eee) {
  margin: 0 0 20px 0;
  font-family: Arial;
  color: $color;
  background: $background;
}

section-one {
  @include title-style(#c63, #eee);
}
section-two {
  @include title-style(#39c, #333);
}
								    
								
								    
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

section-one {
  margin: 0 0 20px 0;
  font-family: Arial;
  color: #c63;
  background: #eee;
}

section-two {
  margin: 0 0 20px 0;
  font-family: Arial;
  color: #39c;
  background: #333;
}
									
								

Extend / Inheritance

Share a set of CSS properties from one selector to another. Again helps you declutter your code.

								    
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}


// Using placeholder selectors with @extend

%button {
  padding: 10px;
  font-weight: bold;
  background: blue;
}
  
  
// We can call this rule set in other classes as we did previously, using @extend

.buy {
  @extend %button;
}
.submit {
  @extend %button;
  background: green;
}

// Sass will compile this like an extended class, but the %button placeholder rule set won’t appear in the output.
								    
								
								    
.message, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.buy, .submit {
  padding: 10px;
  font-weight: bold;
  background: blue;
}

.submit {
  background: green;
}
									
								

Operators

Gives you flexibility so you can either reduce class numbers to keep your code clean, or has practical applications such as creating layouts and vertical enforce vertical rhythm.

								    
.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}
								    
								
								    
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}
									
								

Media Queries

Sass let's you manipulate media queries in very effective ways like nesting. So you can see on spot for every element, the responsive behavior associated.

								    
section.main {
  float: left;
  width: 65%;
  font-size: 16px;
  line-height: 1.4;
 
  @media screen and (max-width: 800px) {
    float: none;
    width: auto;
  }
 
  @media screen and (max-width: 500px) {
    font-size: 12px;
    line-height: 1.4;
  }
}
								    
								
								    
section.main {
  float: left;
  width: 65%;
  font-size: 16px;
  line-height: 1.4;
}
@media screen and (max-width: 800px) {
  section.main {
    float: none;
    width: auto;
  }
}
@media screen and (max-width: 500px) {
  section.main {
    font-size: 12px;
    line-height: 1.4;
  }
}
									
								

Box Shadow Mixin

								    
@mixin shadow($x, $y, $blur, $color) {
  -webkit-box-shadow: $x $y $blur $color;
     -moz-box-shadow: $x $y $blur $color;
          box-shadow: $x $y $blur $color;
}

section.main {
	@include shadow(0, 3px, 6px, rgba(0,0,0,.5));
}
								    
								
								    
section.main {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}