Sass – the basics

Features

• Variables: for reusable values such as colours, font-sizes, spacing, etc;
• Nesting: To nest selectors inside of one another, allowing us to write less code;
• Operators: For mathematical operations right inside of CSS;
• Partials & Imports: To write CSS in different files and importing them all into one single file;
• Mixins: To write reusable pieces of CSS code;
• Functions: similar to mixins, with the difference that they produce a value that can then be used; ie darken(color, i%)
• Extends: To make different selectors inherit declarations that are common to all of them;
• Control Directives: for writing complex code using conditionals and loops;

Sass syntax vs SCSS syntax

Sass: no requirement for brackets or semi-colons

SCSS similar to traditional CSS, clearer to follow and easier to convert old CSS projects.

Mixins, Functions & Extends

Mixins

ie Clearfix mixin:

@mixin clearfix {
 &::after {
  content: "";
  clear: both;
  display: table;
 }
}

nav {
 @include clearfix;
}

Mixins are groups of CSS that can be reused. Use @include to insert the mixin.

You can also pass arguments through mixins:

@mixin style-link-text($colour) {
 text-decoration: none;
 text-transform: uppercase;
 color: $colour;
}

@include style-link-text(#FFF);

Functions

Functions are like mixins but you can perform mathematical action using arguments passed in parenthesis:

@function divide($a, $b) {
 return $a / $b;
}

Sass has a number of built in functions such as darken() and lighten().

Extends

 

%btn-placeholder {
 styling
}

extend %btn-placeholder

Like mixins, this allows you to reuse code, however instead of copying the code to each element, when compiled it will group all the elements together and apply the style. Use instead of mixins when the elements are related to each other.