Making Your Life Easier with Sass

Sebastián Ariel Bevacqua
Quadion Technologies
5 min readNov 30, 2016

--

Are you sick and tired of struggling with CSS? Sass is here to help you!

Sass: CSS with superpowers

In one of our largest web projects, we’ve found ourselves with a huge single CSS file for the entire project.

Every time we wanted to change something in that awful thing we just wanna cry. That lovely CSS file had more than 7k lines, a nightmare for the next guy who wanted to do something with it. It was a complete mess until we met Sass ;).

One of the main reasons why we love Sass is that it helps you organize and modularize your style sheets. You will be able to split your huge CSS file into several smaller files that will be easier to maintain, understand, and organize.

First of all, you must have Sass installed in your system. In order to do so, you must follow the instructions available at http://sass-lang.com/install

In this article I’m going to cover these Sass features with some code examples:

  • Partials
  • Import
  • Variables
  • Nesting
  • Mixins
  • Extend/Inheritance

Partials

One of the best ways to modularize and maintain your style sheets is using partials. A partial is simply a Sass file named with a leading underscore (e.g. _partial.scss) which contains little snippets of CSS.

The underscore is telling Sass not to generate a CSS file for that file.

Sass partials are used with the @import directive.

Import

Unlike the @importoption from CSS, Sass @import will not create another HTTP request. It will take the file that you want to import and combine it with the file you’re importing it into so that you can serve a single CSS file to the web browser. This will save you a lot of unnecessary HTTP requests.

Let’s say you have a couple of Sass files, _fonts.scss (with your fonts definitions) and base.scss. We want to import _fonts.scss into base.scss.

https://gist.github.com/sebabeva/8a69962a2e3de907c6ca8a37e09c194d
https://gist.github.com/sebabeva/4794105e0ae6c5df6db090d8c1797f68

When you import a file, you don't need to include the file extension .scss (e.g. @import 'fonts';).

And your generated CSS file will be something like this:

https://gist.github.com/sebabeva/93b848a0ecca7c38566f595a102dba3d

Variables

With Sass variables you can store things like colors, font stacks, media queries, or any other CSS value that you want to reuse.

Variables can be very helpful. Imagine that you have to change the color of the brand’s logo, and to do so you will need to update all colors in your CSS. With Sass, the only thing you have to do is to update the declarations of those variables only once, and that’s it! Changes will be reflected in all your style sheets.

With the $ symbol you are saying that a Sass variable is next. Here’s an example:

https://gist.github.com/sebabeva/f67080c8f4d81bcda188971ac9db712e

When the Sass is processed, it takes the variables we define and outputs normal CSS with our variable values placed in the CSS like this:

https://gist.github.com/sebabeva/970ebb76de91d8c0993d6da0d2e3a54e

Nesting

Sass will let you nest your CSS selectors so you can have a declaration inside another declaration in a more readable and maintainable way.

Be aware that you must follow The Inception Rule: don’t go more than four levels deep. Overnesting can cause problems with overselection and file size.

Here’s an example of a simple nesting in Sass:

https://gist.github.com/sebabeva/db2c0c62ae05257231428a350d4af908

As you can see in the example above, the h1 and pselectors are nested inside the .container CSS class. And the generated CSS file will look like something like this:

https://gist.github.com/sebabeva/12f5eabfb837ad6e279becf3a30cf5a6

Mixins

A mixin allows you to make groups of CSS declarations that you want to reuse throughout your site in a flexible way by passing parameters.

This is awesome if you don’t want to struggle with vendor prefixes.

Here’s an example for a gradient background:

https://gist.github.com/sebabeva/e500ab44624ab48ee05be1be45991579

To create a mixin you have to use the @mixin directive followed by a name.

In the example above, I’ve created a mixin with the @mixin directive named gradient-background with two parameters ($leftColor and $rightColor). This allows me to create a background gradient with the colors I want.

The .rectangle CSS class is using the @include directive followed by the name of the mixin and the required parameters (left and right colors in this case).

So your generated CSS file will look like this:

https://gist.github.com/sebabeva/a80590e82ebf130448105c910d5e8999

Extend/Inheritance

Using @extend allows you to share CSS properties from one selector to another, so you can avoid repeating yourself in your code. You might save a lot of time using this.

https://gist.github.com/sebabeva/c5fa8c50aba0bde2dd525a89820fc98a

All selectors using @extend .base-message will inherit the CSS properties of the .base-message , like this:

https://gist.github.com/sebabeva/b5b5668772373d27dadfd4f3299deb25

We have just covered the basics. So if you are a developer/designer, please start using Sass, you won’t regret it.

Don’t forget to visit http://sass-lang.com to learn more about it.

© Quadion 2016. All rights reserved.

Thanks for reading our post!

Would you like more information? Do you need our help?

New York, USA +1.212.202.0568
Buenos Aires, Argentina +54.11.5031.2930
www.quadiontech.com

--

--