If you're new to web design, you may have heard the term 'Sass' floating around. If you're unsure what Sass does and whether or not you must be using it, we're here to assist with our guide to Sass.

In short, Sass is a CSS preprocessor, that adds special features such as variables, nested rules and mixins (sometimes named as syntactical sugar) into regular CSS. The aim is to create the coding process less complicated and a lot efficient. Let's explore in additional detail. 

What is a CSS preprocessor?

A CSS preprocessor is a scripting language that extends CSS by permitting developers to write down code in one language and then compile it into CSS. Sass is probably the foremost common preprocessor around, however alternative common examples include Less and Stylus.

Before we tend to go any further, I want a quick public service announcement is in order: if you're new to CSS, I don't suggest using any preprocessors (like Sass). the identical goes for the other extensions or frameworks. whereas it's true they provide several benefits in speed and efficiency, it's more important that you simply first perceive the basic fundamentals of CSS. to ensure you learn the core ideas before you begin exploring shortcuts.

What is Sass?

Sass (Syntactically awesome style Sheets) is an extension of CSS that allows you to use things like variables, nested rules, inline imports and a lot more. It additionally helps to keep things unionized and permits you to create style sheets quicker.

Sass is compatible with all versions of CSS. the sole demand for using it is that you simply must have Ruby installed. Users also are asked to follow the Sass Community tips.

How to use Sass

In the following section, I'll define some basic tips for using Sass, using examples from the official Sass web site. Take a glance at the Sass Documentation for extra references and examples.

Syntax

Sass includes two syntax options:

SCSS (Sassy CSS): Uses the .scss file extension and is absolutely compliant with CSS syntax Indented (simply known as 'Sass'): Uses .sass file extension and indentation instead of brackets; it is not totally compliant with CSS syntax, however it's faster to write

Note that files can be converted from one syntax to the other using the sass-convert command.

Variables

Just like different programming languages, Sass permits the utilization of variables that can store info you'll be able to use throughout your style sheet. for example, you'll be able to store a color value in a variable at the top of the file, and then use this variable when setting the color of your components. this allows you to quickly amendment your colors while not having to change every line individually.

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;

}

Nesting

Nesting is a double-edged sword. whereas it provides a wonderful technique for reducing the quantity of code you need to write, it also can cause over-qualified CSS if not executed carefully. the concept is to nest your CSS selectors in such a way as to mimic your HTML hierarchy.

The following shows a basic navigation style that uses nesting:

nav {

  ul {

    margin: 0;

    padding: 0;

    list-style: none;

  }

  li { display: inline-block; }

  a {

    display: block;

    padding: 6px 12px;

    text-decoration: none;

  }

}

The CSS output is as follows:

nav ul {

  margin: 0;

  padding: 0;

  list-style: none;

}

nav li {

  display: inline-block;

}

nav a {

  display: block;

  padding: 6px 12px;

  text-decoration: none;

}

Partials

Partials are smaller Sass files which will be imported (see next section) into other Sass files. think about partials as code snippets. With these code snippets, your CSS can now be modular and easier to take care of. 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 permits you to import your partial files into the present file, to create one single CSS file. Be aware of how many imports you're using as an HTTP request are going to be generated for every one.

// _reset.scss

html,

body,

ul,

ol {

   margin: 0;

  padding: 0;

}

// basefile.scss

@import 'reset';

body {

  font: 100% Helvetica, sans-serif;

  background-color: #efefef;

}

And the corresponding CSS output:

html, body, ul, ol {

  margin: 0;

  padding: 0;

}

body {

  font: 100% Helvetica, sans-serif;

  background-color: #efefef;

}

Note: when importing partials, you don't need to include the file extension or the underscore.

Mixins

One of the benefits of using preprocessors is their ability to take complex, long-winded code and simplify it. this is often wherever mixins come in handy! 

For example, if you wish to include the vendor prefixes, you'll be able to use a mixin instead. Take a glance at this example for border-radius:

@mixin border-radius($radius) {

  -webkit-border-radius: $radius;

     -moz-border-radius: $radius;

      -ms-border-radius: $radius;

          border-radius: $radius;

}

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

Notice the @mixin directive at the top. it's been given the name border-radius and uses the variable $radius as its parameter. This variable is used to set the radius value for every element. 

Later, the @include directive is called, along with the mixin name (border-radius) and a parameter (10px). Thus .box .

The following CSS is produced:

.box {

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -ms-border-radius: 10px;

  border-radius: 10px;

}

Extend/Inheritance

The @extend directive has been referred to as one of Sass' most powerful features. after seeing it in action, it's clear why.

The idea is that with this directive you won't have to include multiple class names on your HTML elements and can keep your code DRY. Your selectors can inherit the styles of different selectors, and then be simply extended when needed. now that's powerful.

Operators

Having the flexibility to perform calculations in your CSS permits you to do more, like convert pixel values into percentages. You'll have access to standard maths functions like addition, subtraction, multiplication and division. Of course, these functions can be combined to create complicated calculations.

In addition, Sass includes some inbuilt functions to assist manipulate numbers. Functions like percentage(), floor() and round() to name a few.