Intro
These days, websites have become more and more complex, so we really need to have more control and space to spread web designers’ ideas. I can bet you probably write enough CSS to see hundreds, maybe thousands, of possibilities in the code to make it better, but you also pull your hair out over some of the limitations.
Do you really like to copy and paste your code to all of the stylesheets? Or like to try to remember the browser prefixes and divergent syntaxes for CSS3 techniques? Or how there's no help managing color values? If you have ever encountered one of these situations, let me introduce SASS (.scss).
SASS is used to set the hex, rgb, rgba or hsla colors as variables and reuse them later for an entire project. You can also generate classes for grids and refactor and reuse a bit of code as "mixins," or “extend” your classes with previously used properties. All of these are analogs to functions in programming languages, and let you write CSS in fashion and not repeat yourself in any way. With SASS you can create tiny stylesheets that I think are easier to write and edit then “old-school” CSS code.
So, let’s go over the most advantageous features and create some sample code to prove that your stylesheets are worthy of being written in SASS.
Variables
Variables come in very handy and useful when you want to define colors or set a default border width & style for your entire project. Here is a simple bit of code “colors & borders”:
All variables should be defined by using a $ sign prefix.
It’s automatically compiled to “clean” CSS:
@Mixins
The previous example was pretty simple, so lets go deeper. @Mixins are more useful than variables, as they allow you to re-use CSS properties and selectors. Let’s take a look at how to do this:
First we need to define the “@mixin” and give it a name. Let’s name it, “few-properties.” Now we can add some properties such as text-alignment, font-size and font-weight, then create a class or element and “@include” your “@mixin.”
The code should look something similar to this:
Now you can re-use your @mixin for the entire project. Just add “@include few-properties;” to any class and the compiled CSS will look like this sample:
Now take a look at how we can use @mixins with selectors:
Will be compiled to:
“@extend”
With SASS you can tell one selector to inherit the styles of another without duplicating the CSS properties. Keep in mind if you have many duplicated properties, you could face some performance issues. Also, there is a lot more work to support your code, which has the same properties running over your entire stylesheet. This feature allows you to inherit any style already used for any previous class.
Let’s say I want to use the properties from “.class-0” & “.class-1” on “.class-2.” To achieve this we need to create “.class-2” and add “@extend .class-0;” and “@extend .class-1;”
Your SASS code will be compiled to 100% valid CSS:
Generate Simple Grid
With SASS you can generate your own grid so it can be used for responsive web design or any other special case where many classes or percentage calculations should be applied.
First we need to define the column and width variables, which will be reused later to generate grid classes. These can be adjusted at any time. We can start with a 6-column grid and the total width of our page will be 1230px. Also, I will use directive @for which outputs a set of styles. @for $i from <start> through <end> is used to apply styles to each of our grid classes.Let’s take a look how this look in (.scss):
The above SASS code will be compiled down to the following CSS:
By using this simple solution you don’t need to count anything or write 30 lines of CSS code manually.
Calculations (PX to EM)
SASS has many built in functions for calculations, and you can even make your own. Here’s a function I’ve used to calculate em’s, which is a modification I found on The SASS Way website.
This sample function has 2 variables, $target and $context. $context is optional, and it defaults to 16. This is a default web-browser font-size. Now let’s rewrite our example using this function and look at the result:
This is the same as saying (24 / 16) * 1em but we don’t have to repeat ourselves all over the stylesheet. Now we only write em(20) “value in pixels” and it will be automatically calculated and to em’s and compiles to clean CSS.
Nested classes “modules”
While writing SASS code we can wrap as many selectors as we want into one module, so we can stay organized and keep the code understandable for everyone. Let’s take a look at the sample to find out how it works:
The most interesting part is how this code will look in plain CSS. Here you go, modern CSS has been generated:
Conclusion
I think it’s clear that SASS is really awesome, simple, and worthy of being used in order to keep your styles well structured and easily understandable. I also highly recommend you check out the SASS documentation website and other SASS frameworks like Compass and Zurb Foundation. They have many predefined variables, grids for responsive design, calculations, mixins, and other directives to help you easily create modern and visually awesome websites. So what are you waiting for? Let’s take a look at the tools we use at Devbridge to write those awesome stylesheets.
Tools & Setup
For Windows & Visual Studio 2012 users there is a plugin called Web Workbench, which has all predefined settings and dependencies needed for SASS to run on your computer.
For more advanced users like our HTML/CSS Guru’s team, there is a cross platform supported IDE called WebStorm from JetBrains. There are many cool features included, one of them being full SASS syntax support. To run SASS on Windows, you need to install RUBY on your local machine. After that you can configure SASS and add additional frameworks from the command line.