What is Sass and why are we using it in our Magento projects?

SASS (Syntactically Awesome Style Sheets) is the most mature and stable CSS extension language available and by using it, we are getting much better results and what is more important, we are spending less time writing the code.

“Sass can shape the future of CSS”

Some of the advantages of using this technique are:

Style nesting

CSS does not have clear nested and visual hierarchy like HTML. Sass will let you nest your CSS selectors in the way that follows the same hierarchy like HTML.

//CSS code example – no nesting
#nav {
    width: 100%;
}
#nav ul {
    padding: 0;
}
#nav ul li {
    float: left;
}
#nav ul li a {
    color: #fff;
    display: block;
}

//Sass code example with nesting
#nav {
    width: 100%;
   ul {
        padding: 0;
        li {
            float: left;
            a {
                color: #fff;
                display: block
                }
            }
       }
}

Variables

Most would agree that it is easier to change font style/color/size or background color in one place instead of 10 or 20 places. So just define a variable and use it throughout your Sass file. For example, you could define the variable $base-color and then if want to make a change, you only have to change it in one place.

//Using Sass variables example
$base-color: #000;
……………………………………………………………………..
body { color: $base-color; }
button { background-color: $base-color; }
.top-links { color
: $base-color; }

Mixins, placeholders and functions

Write complete pieces of styling in one place and then use it anywhere in your Sass file. If you plan to use parameters, that will bring the code to an even higher level.

//Example of defining mixin
@mixin box {
   background: #ddd;
   border: 1px solid #000;
   color: #000;
}

//Example of using mixin
.sidebar {
   @include box;
}

To make Sass even more awesome, we are using COMPASS. Compass is a Sass framework with a huge collection of predefined tools for best practices. This is very useful when we are using CSS3 properties or media queries for responsive versions of website (mobiles, tablets etc…).

“Compass – write CSS in a more elegant way”

Our team recognized the importance of using Sass even before Magento released version 1.9 which contains a RWD (Responsive Web Design) theme. The Magento RWD theme has been developed using Sass. Some of the websites that we developed using our custom Sass framework are: Maxi Zoo and Skalkur.

“Navipartner base theme – Magento RWD theme on steroids”

Soon after Magento ver.1.9 was released, we decided to build our new base theme based on Magento’s new responsive (RWD) theme. Basically, we kept the good things from the RWD theme, some solutions we replaced with better and of course we added some new features.

We replaced icon images with font icons. This way icons are in vector format so we can increase it as much as we want without losing quality. This approach is good for retina displays.

Tjek ikoner, font ikoner i vektorformat

We rewrote CSS code into Sass for all of our existing in-house modules. We also added new mixins that allow us to speed up our frontend development process.

Bottom line is: using Sass/Compass is awesome! Everything is better now. Writing CSS has never been so much fun – better syntax, managed code, dynamic parts and more flexible than pure CSS.