Try Our Free SEO Analyzer

Why use SASS as your CSS Preprocessor?

Writing CSS for large websites can get increasingly difficult to maintain throughout the development process. Repeating styles, long element selectors, vendor prefixes, and a giant CSS file are a few issues that come with writing vanilla CSS.

At some point, you may have heard of SASS. Maybe you thought it would be overcomplicated to use, or at least unnecessary.

Don't give me any of that SASS! Click To Tweet

Whatever your feelings may be, I’m here to convince you that SASS can greatly increase the quality of your development workflow when it comes to creating and maintaining your stylesheets.

What is SASS?

“SASS” stands for “Syntactically Awesome Stylesheets”. It is a preprocessor for CSS, which means that it compiles to CSS.

It extends from CSS3, which means it can do everything CSS3 can do, and more! In fact, any valid CSS3 you write is also valid SASS.

All the extra features of SASS are optional to use, which makes it easy for CSS coders to get started with SASS.

Note: There are two syntaxes for SASS: SASS and SCSS (or “Sassy CSS”). SCSS is the more popular option, as it mimics the syntax of regular CSS with curly braces.

SASS syntax uses indentations only instead of curly braces, which requires much more careful formatting.

Don’t Repeat Yourself

One of the most important principles in software and development is “Don’t Repeat Yourself,” or “DRY” for short. People sometimes like to say “keep your code DRY” — this is what they are referring to.

We want to keep our code DRY because it keeps things organized and understandable, and helps us avoid confusion. It gives us a single location where we can edit code that is reused in many places.

Vanilla CSS does not offer any way to keep your code DRY. It forces the user to rewrite or copy/paste the same code, over and over again.

This is bound to make your code hard to maintain, especially when you need to make a change.

SASS offers many features that help to keep your code DRY. These features are explained below.

Variables

Variables should be familiar to all programmers. A variable will allow you to stash information for later use in your styles, like so:

//SCSS

$blue: #09f;

a {
color: $blue;
}

//CSS

a {
color: #09f;
}

This code creates the following result:

SASS Variable Example

You can reuse the same variable as often as you like in your code.

By doing so, you will no longer have to update your CSS attributes in several different places. It’s now controlled in one single location.

Mixins

With a @mixin, you can repeat blocks of code, and even pass in parameters. This is best used with vendor prefixes, like so:

//SCSS

@mixin transform($property) {
-webkit-transform: $property;
-moz-transform: $property;
-ms-transform: $property;
-o-transform: $property;
transform: $property;
}

@mixin rotate($deg) {
@include transform(rotate(#{$deg}deg));
}

span {
@include rotate(45);
}

//CSS

span {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

This code creates the following result:

SASS Mixin Example

Use @include where you want to insert your mixin.

Mixins will heavily clean up your code and prevent you from repeating yourself.

Extend

@extend allows you to reuse code inside different selectors, so that you don’t have to target a selector more than once, neither will you repeat yourself. This is perhaps the most useful feature of SASS.

You can extend an existing class like so:

//SCSS

.button {
display: inline-block;
padding: 20px;
background-color: #09f;
font-size: 20px;
color: #fff;
text-decoration: none;
}

.button-success {
@extend .button;
background-color: #0c0;
}

//CSS

.button, .button-success {
display: inline-block;
padding: 20px;
background-color: #09f;
font-size: 20px;
color: #fff;
text-decoration: none;
}

.button-success {
background-color: #0c0;
}

This code creates the following result. Notice how “button-success” inherits the same styles, besides the background color.

SASS Extend Example

Note: If you don’t want to extend from a class, you can extend in this way instead:

//SCSS

%button {
display: inline-block;
padding: 20px;
background-color: #09f;
font-size: 20px;
color: #fff;
text-decoration: none;
}

.button-success {
@extend %button;
background-color: #0c0;
}

//CSS

.button-success {
display: inline-block;
padding: 20px;
background-color: #0c0;
font-size: 20px;
color: #fff;
text-decoration: none;
}

The abovementioned features are what will allow you to keep your code DRY. Below are a couple more helpful features that make SASS worth using.

Nesting

Nesting your code will allow you to mimic the structure of your HTML.

It is best practice to avoid over-nesting your code, otherwise your output CSS will be bulky. Use this only when you need it.

//SCSS

.navigation {
margin: 0;
padding: 0;

ul {
margin-left: 0;
list-style: none;
}

li {
display: inline-block;
}

a {
padding: 12px 20px;
color: #fff;
}
}

//CSS

.navigation {
margin: 0;
padding: 0;
}

.navigation ul {
margin-left: 0;
list-style: none;
}

.navigation li {
display: inline-block;
}

.navigation a {
padding: 12px 20px;
color: #fff;
}

Import

Instead of having one large CSS file or having to make several HTTP requests to different CSS files on your site, you can use @import to divide up your SASS into separate, more manageable files called partials.

//SCSS

@import "partials/header";
@import "partials/footer";

This allows you to keep your code more organized, while only needing one HTTP request after the SASS code is compiled to CSS.

SASS is well supported

SASS has heavy support online, with tons of available resources and documentation. It is also used in many of the front-end frameworks such as Bootstrap and Foundation.

SASS isn’t going away. As an essential tool for developers who want to write the best CSS code they can, SASS will keep your code DRY, organized and highly more capable.

Leave a Reply

Your email address will not be published. Required fields are marked *

shares