---

layout: post title : Sass date: 2018-02-13 —

Sass

Sass (Syntactically Awesome Style Sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster.

Variables

Just like other programming languages, Sass allows the use of variables that can store information you can use throughout your style sheet. For example, you can store a colour value in a variable at the top of the file, and then use this variable when setting the colour of your elements. This enables you to quickly change your colours without having to modify each line separately.

For example:

$font-stack: Helvetica, sans-serif; $primary-color: #333;

body { font: 100% $font-stack; color: $primary-color; }

The following CSS will be produced:

body { font: 100% Helvetica, sans-serif; color: #333; }

Partials

Partials are smaller Sass files that can be imported (see next section) into other Sass files. Think of partials as code snippets. With these code snippets, your CSS can now be modular and easier to maintain. A partial is designated as such by naming it with a leading underscore: _partial.scss.

Import

Used with Partials (see previous section), the @import directive allows you to import your partial files into the current file, to build one single CSS file. Be mindful of how many imports you’re using as an HTTP request will be generated for each one.

Mixin

Is a class that contains methods for use by of those other classes.