What is Sass and how can it help you?

First of all, you are probably asking yourself ‘What is Sass?’. Well, Sass is a extension CSS that outputs standard CSS code when compiled by a preprocessor. You’re probably thinking ‘What is the point compiling Sass to CSS when I could just use CSS?’. Well, in this article, we are going to go through the 7 ways Sass can help you with your projects, including a few tips and tricks when using Sass.

In this article, we are going to explore the following:

  • Sass Variables
  • Sass Mixins
  • Sass Extend
  • The Use of Operations and Maths
  • Sass Import
  • SCSS: CSS’ “Close Relative”
  • Nesting Code

Sass Variables and Mixins

As mentioned before, Sass is a CSS extension. It is also similar to a programming language because Variables and Functions (known as Mixins in Sass) can be used. Variables and mixins are very useful when it comes to coding in Sass as you can use and reuse them across your code. Variables and mixins are also easily customisable, all you have to do is change the variables or mixins you have declared, and it automatically switches all over your code.

1. Variables

The definition of a variable in programming is a placeholder that is used to store information. Likewise in Sass, a variable stores information. In general, variables have a particular data type. A data type is the data’s item kind stored in variables. In Sass, you will never need to specify a variable’s data type (unlike some other programming languages) because data types will be detected by the compiler automatically.

Moreover, what makes variable remarkably flexible is you can reference, change and also override them across your code which improves productivity.

Below is a real-life example of using a Sass variable:

Sass Code
$primary-colour: #2BC3FF div.circle-element background: $primary-colour height: 50px width: 50px border-radius: 50px
CSS Output
div.circle-element{ background: #2BC3FF; height: 50px; width: 50px; border-radius: 50px; }

As you can see, a variable is declared using a $ symbol, followed by your chosen name for the variable and the value of the variable after the colon. When compiled into plain CSS the variable’s value is placed within the element’s style which can be read by the browser.

Quick Tip: When using variables in Sass, always store values that you are always going to use a lot in your code. For example colours, font weights and families, paddings, margins and anything else that you may need across your project.

2. Mixins

When using mixins in Sass, just think of them as blocks of code you create to reuse and modify depending on what you are styling and the parameters (if any). In mixins, you can use many lines of CSS declarations, but this depends on what you the code to do.

Here is an example of using a mixin in Sass:

Simple Border Mixin
=border($size) border: $size solid black -webkit-border: $size solid black -moz-border: $size solid black -ms-border: $size solid black -o-border: $size solid black .box-element +border(2px)
CSS Output
div.box-element{ border: 2px solid black; -webkit-border: 2px solid black; -moz-border: 2px solid black; -ms-border: 2px solid black; -o-border: 2px solid black; }

As you can see, you can declare a mixin using the = before the mixin name and within the brackets, you can have parameters. You can have multiple parameters and they have to be separated by commas or you can have none at all, for example =border($size, $colour) has two parameters. Within the mixin, you can have a group of CSS declarations and also the parameters included. Parameters allow mixins to be more flexible, allowing you to parse values into the mixin when declared, changing the output of the CSS as a result. The above mixin allows an input parameter to change the border size and includes different vendor prefixes.

3. Sass Extend and Inheritance

Extend is a really useful feature in Sass. Sass extend allows you to inherit other CSS properties from on selector to another, keeping your CSS DRY (Don’t Repeat Yourself) in the process.

Here is an example of using Sass Extend:

Button Style Extend
%button padding: 12px 25px color: #FFF border: 4px solid #DDD .default @extend %button background: #F843AD border-color: #F843AD
CSS Output
.default{ padding: 12px 25px; color: #FFF; border: 4px solid #DDD; background: #F843AD; border-color: #F843AD; }

On the example above, you can see that the .default class inherits all of the styles form the .button class when it @extend the class and outputs into CSS. Sass Extends are very usefull and stop you from repeating yourself which keeps your output CSS clean and ultimatly a smaller file size.

4. The Use of Operations and Maths

The great thing about Sass is that you can use maths and calculation for different parts of your code if you want or need to. Sass includes helpful math operators like:

  • + – Addition
  • – Subtraction
  • * – Multiplication
  • / – Division
  • % – Percentage

Below is an example of how to use operations in Sass:

Example of using Operations
$width: 1200px .main-container width: $width margin: 0 -10px .column-4 width: $width / 3 float: left padding: 0 10px
CSS Output
.main-container{ width: 1200px; margin: 0 -10px; } .column-4{ width: 400px; float: left; padding: 0 10px; }

On the example above, you can see that there is a $width variable which is divided by 3 in the .column-4 class. When compiled to CSS the use of the / operator divides the value of $width by 3 and puts the value of the answer to the width property of the .column-4, the same thing will happen if any other operator was used and in other scenarios.

5. Sass Import

The @import is a very useful function within Sass as it allows you to split your code to smaller chunks in different files. The import function is within CSS but the problem with CSS is that every time @import is called a HTTP request is called. However, with Sass, import combines the content of the Sass files into one CSS (which the browser can read) file when compiled instead of creating a new HTTP request.

Here is an example on when you can use the @import in Sass.

div, article, audio, video margin: 0 padding: 0 display: block
@import normalise.css .body color: #333 font-weight: 300 font-family: 'Proxima Nova', sans-serif
CSS Output
div, article, audio, video{ margin: 0; padding: 0; display: block; } .body{ color: #333; font-weight: 300; font-family: 'Proxima Nova', sans-serif; }

As you can see in the example above, the main.scss file includes the normalise.scss file and when compiled into plain CSS, both files are compiled and combined together.

6. SCSS: CSS’ “Close Relative”

A common thing that takes some time to get used to when shifting from normal CSS to Sass is the Sass syntax. Developers (including myself) find it hard changing from coding in CSS to Sass as the syntax is so different, as you can see on the code boxes above, Sass does not have any curly braces and semi-colons. However, within Sass, there is a syntax called SCSS which you can you can use. SCSS’ syntax is very close to that of CSS and more developers tend to use it rather the Sass’ default syntax because it is a more natural chose when moving from CSS.

Here is an example of the difference between the Sass and SCSS syntax

$width: 1200px =border($size) border: $size solid black -webkit-border: $size solid black -moz-border: $size solid black -ms-border: $size solid black -o-border: $size solid black .main-container width: $width margin: 0 -10px .column-4 width: $width / 3 float: left padding: 0 10px .box-element +border(2px)
$width: 1200px; @border($size){ border: $size solid black; -webkit-border: $size solid black; -moz-border: $size solid black; -ms-border: $size solid black; -o-border: $size solid black; } .main-container{ width: $width; margin: 0 -10px; } .column-4{ width: $width / 3; float: left; padding: 0 10px; } .box-element @include border(2px);

As you can see in the code above, SCSS’ syntax is very close to CSS, so transitioning from CSS is a lot easier.

7. Nesting Code

When coding in Sass, nesting code is a feature that allows you to add blocks of code within blocks of code, this may sound confusing so here is an example below:

.menu overflow: hidden width: 100% background: #FFF .menu-item float: left color: #F72A91 display: inline-block
.menu{ overflow: hidden; width: 100%; background: #FFF; } .menu .menu-item{ float: left; color: #F72A91; display: inline-block; }

As you can see on the example code above, the styles .menu-item element is within the .menu element and when compiled it joins the both elements together, this is because Sass works on a hierarchy basis (similar to HTML), meaning you can add elements within another and the inner elements are children to the outer elements which are the parent elements. When the Sass code is compiled (above), you can see in the CSS code, the styles for the child element in the .menu .menu-item block.

Implement Sass In Your Next Project!

Sass is a really good CSS preprocessor to start off with due to is flexibility, efficiency and its natural step from CSS. Within you next project, try and use Sass because it makes a real difference. You can learn more about Sass by going to sass-lang.com.