Mícéal Gallagher in Css 3 minutes

Sass Cheatsheet

Everyone does it but no one admits it.

Comments

Standard comments

// Will NOT be output into compiled CSS
/* This comment will be output into compiled CSS */

Importing

Imports the styles found in controls.css at compile time. A seperate stylesheet called controls.css will also be created; if you don’t want this look at Partials.

@import "controls";

Partials

Compile controls.sass into current stylesheet without creating controls.css.

// Same as importing but file is named with an underscore (_buttons.sass)
@import "controls";

Nesting

Style h1 and h2 tags in div with the class container

.container {
  h2 {
    font-size: 20px;
  }
  p {
    font-size: 12px;
  }  
}

Properties

Any CSS property that is in a namespace can become a nested property; text-decorate and text-transform are in the text namespace.

.container {
  font: {
    size: 30px;
  }
  text: {
    decorate: underline;
    transform: uppercase;
  }
}

Parent selector

The parent selector is denoted by &. Note, the parent selector can be placed anywhere in the CSS selector. Don’t go crazy with this, you can make your selectors too specific and things can become unmaintainable.

.container {
  .flash {
    // Apply to a div with class 'flash' inside div with class 'container'
  }

  &.flash {
    // Apply to a div with classes 'container' and 'flash'
  }

  &:hover {
    // Apply to div with class 'container' upon mouse hover
  }
}

Variables

Variables are denoted by the $ symbol

$accent_color: 'green'

Types

// Booleans
$answered: true;  

// Numbers
$height: 4px; // with units
$height: 1.5; // without units  

// Colors
$accent: white; // Named color
$accent: rgba(0,0,0,0.5); // RGBA color
$accent: #fff; // Hex color  

// Strings
$title: Hello, world; // With quotes
$title: "Hello, world"; // Without quotes  

// Lists
$padding: 10px, 10px, 10px, 10px; // Comma seperated
$padding: 10px 10px 10px 10px; // Space seperated  

// Null
$content: null; // Useful for conditionals

Interpolation

Variable interpolation can be used in selectors, properties and values.

$where = left;

.thick-#{side}-border {
  border-#{side}: solid 5px green
}

Variable value safety

You can use the !default keyword to make sure you don’t overwrite the current variable value. This can be very useful when you are importing other Sass files that have declared a variable with the same name.

$accent_color: 'green';
$accent_color: 'orange' !default;

// $accent_color will have the value 'green' NOT 'orange'

Mixin

When to use?
Similar sets of properties that are required multiple times with small variations.

Make sure you define your mixin before you call it otherwise you’re gonna have a bad time.

@mixin box-sizing($value: border-box) { // Notice the default argument value
  -webkit-box-sizing: $value;
  -moz-box-sizing: $value;
  box-sizing: $value;
}

.container {
  @include box-sizing(content-box);
  display: inline-block
}

.inner-container {
  @include box-sizing; // Default argument value will be used
}

Variable argument

A variable argument allows us to pass multiple arguments to a mixin; kinda like passing array of parameters.

@mixin transition($val) {
  -webkit-transition: $val;
}

.container {
  @include transition(color 0.1s ease-in, background 0.1s ease-out)
}

Extend

When to use?
When sets of properties match each other exactly.

The extend keyword will have Sass track and combine selectors for us. Lets say we want all buttons to be styled the same but start and stop should have the background green and red respectively.

.button {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 60px;
  background-color: white
  color: black;
}

.start {
  @extend .button;
  background-color: green;
}

.stop {
  @extend .button;
  background-color: red;
}

Be afraid

Careless use of extend can result in stylesheet bloat as a result of Sass creating unnecessary selectors.

.button {
  padding: 10px;
  ...
}

.start {
  @extend .button;
  ...
}

.wrapper .button {
  padding: 20px
}

Since .button is extended by .start the last .wrapper .button will generate the following (potentially unused - if so see placeholder selectors) CSS

.wrapper .button, .wrapper .start {
  padding: 20px;
}

Placeholder Selectors

Placeholder selectors are denoted by a % infront of a selector - they act more like partials than selectors and are a great way to DRY your CSS.

Placeholder selectors never become selectors of their own and can only be referenced by others. Kind of like mixins without the dynamic component.

Lets refactor the button start, stop button example as a placeholder selector.

%button {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 60px;
  background-color: white
  color: black;
}

.start {
  @extend %button;
  background-color: green;
}

.stop {
  @extend %button;
  background-color: red;
}

IE9 Sucks!

Not surprising. IE9 has a limit of 4096 CSS selectors. While this seems large limit remember, combining your stylesheets and using extend will make you hit this limit very quickly.

Control Directives

Functions

@function halfWidth($width) {
  @return $width / 2;
}

If

$theme: ambient;  

@if $theme == dark {
  ...
} @else if $theme == light {
  ...
} @else {
  ...
}

Each

$users: admin moderator writer;

@each $user in $users {
  .avatar-#{$user} {
    background-image: url('images/avatar-#{$user}');
  }
}

For

@for $i from 1 through 10 {
  .item-#{$i} {
    left: $i * 30px
  } 
}

While

$i: 1;
$while $1 < 21 {
  .odd-row-#{$i} {
    background-color: rgba(0, 0, $i * 10, 1);
  }
  $1: $1 + 2;
}

Math

$minListValue:       min(3,4,1);       // 1
$maxListValue:       max(0,1,2);       // 2
$roundUp:            ceil(2.2);        // 3
$roundClosestNumber: round(3.6);       // 4.0
$roundDown:          floor(5.9);       // 5
$absoluteValue:      abs(6.32);        // 6
$percentile:         percentage(7/10); // 7%

Color

For a full list of color functions refer to the Sass documentation

$base: #05a;  

$darkerBase:      darken($base, 10%);
$lighterBase:     lighten($base, 10%);
$saturatedBase:   saturate($base, 10%);
$desaturatedBase: desaturate($base, 10%);
$invertedBase:    invert($base);
$grayscaleBase:   grayscale($base);