An Introduction to SASS

SASS (or Syntactically Awesome Style Sheets) is a tool known as a CSS preprocessor. CSS preprocessors are scripting languages that extend the default capabilities of CSS.

Other popular examples include LESS and Stylus. They are in fact all great tools to utilize when you wish to code more maintainable CSS. Especially when working with larger codebases.

Defining CSS Preprocessors

“A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain”. — MDN

Once you’re comfortable with CSS, the next natural step is to utilize a preprocessor. The biggest advantage is not having to repeat yourself.

This advantage is known as keeping your CSS Dry, which stands for “Don’t Repeat Yourself.”

Why use preprocessors?

The primary advantages are as follows:

• Cleaner code thanks to variables and nesting.
• Greater ease of maintenance and organisation as we can separate our files into modules.
• Ability to implement logic and calculation in our stylesheets.
• Overall improvement in workflow, which will save hours of development time!

Of all the preprocessors, SASS is by far the most popular within the developer community.

What is SASS?

SASS is a scripting language that provides us with features and tools that regular CSS doesn’t have.

Using SASS we can write more readable, maintainable and reusable code. Think of it as an extension that adds power and elegance to CSS.

It gives us various features such as:

• Variables
• Nesting
• Mixins
• Functions
• Partials & Imports
• Inheritance (Extend functionality)
• Control directives

In other words, SASS helps us organize large stylesheets in a more maintainable way.

And we’ll be looking into all of these features throughout my next series of articles on SASS!

SCSS or Sass?

In SASS there are two different syntaxes: SCSS and Sass. However after being compiled they generate similar output.

SCSS (aka Sassy CSS) is the modern standard. It’s syntax is very similar to CSS in that it uses brackets and semicolons. Even normal CSS is valid in this syntax. The file extension is .scss.

Sass is an older syntax that focuses on indentation to separate code blocks and newline characters to separate rules. It has the file extension .sass.

Throughout this series, I will use SCSS as it’s the more natural syntax (when we use SCSS we still call it SASS!).

It’s also really easy to convert regular CSS to SCSS, as you can just paste in the CSS and work from there!

Related Posts:

• Setting up SASS