What is Sass?

[Rss Bot 1]

Beginners or those who have taken a break from web design for a few years may not know what Sass is, but we're here to help explain with this guide to those starting out or in need of a refresher.

However, before jumping into this article, I feel like a quick public service announcement is in order: if you're new to CSS, I do not recommend using any preprocessors (like Sass). The same goes for any other extensions or frameworks. While it's true they offer many advantages, it's more important that you first understand the basics of CSS; please do not skip this crucial step of learning the core concepts.

What is a CSS preprocessor?

A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Some examples of CSS preprocessor include: Sass, Less and Stylus.

What is Sass?

Sass is arguably the most useful of all CSS extensions

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.

The only requirement for using Sass is that you must have Ruby installed. Users are also asked to follow the Sass Community Guidelines.

Using Sass

The following section outlines basic usage and uses examples from the official Sass website. See the Sass Documentation for additional references and examples.

Syntax

Sass includes two syntax options:

• SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax
• Indented (simply called 'Sass'): Uses .sass file extension and indentation rather than brackets; it is not fully compliant with CSS syntax, but it's quicker to write

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

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:

The following CSS will be produced:

Nesting

Nesting is a double-edged sword. While it provides an excellent method for reducing the amount of code you need to write, it can also lead to over-qualified CSS if not executed carefully. The idea 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:

The CSS output is as follows:

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.

And the corresponding CSS output:

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

Mixins

One of the advantages of using preprocessors is their ability to take complex, long-winded code and simplify it. This is where mixins come in handy! 

For example, if you need to include the vendor prefixes, you can use a mixin instead. Take a look at this example for border-radius:

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

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

The following CSS is produced:

Extend/Inheritance

The @extend directive has been called 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 other selectors, and then be easily extended when required. Now that's powerful.

Operators

Having the ability to perform calculations in your CSS allows 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 complex calculations.

In addition, Sass includes a few built-in functions to help manipulate numbers. Functions like percentage(), floor() and round() to name a few.

Read more:

• Understanding the CSS display property
• 5 of the best resources for learning HTML and CSS
• What CSS framework should you use?

View the full article