Making Your Life Easier with Sass
Are you sick and tired of struggling with CSS? Sass is here to help you!
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 @import
option 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
.
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:
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:
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:
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:
As you can see in the example above, the h1
and p
selectors are nested inside the .container
CSS class. And the generated CSS file will look like something like this:
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:
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:
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.
All selectors using @extend .base-message
will inherit the CSS properties of the .base-message
, like this:
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