Why we are using SASS

Marcel PierryBy Marcel Pierry 1 Jahr agoNo Comments
Home  /  Tech Corner  /  Why we are using SASS

What is SASS ?

SASS is CSS with superpowers. It’s a preprocessor (like LESS) which lets you use a bunch of really cool features, you have always missed while writing CSS, like variables, nesting, partials, mixins, inheritance and operators. There are two syntaxes available for Sass right now. The first and older one, known as intended syntax, is similar to HAML and uses indentation rather than brackets to indicate nesting of selectors and newlines rather than semicolons to separate properties. The second one, known as Sassy CSS (SCSS) is an extension of the syntax of CSS3. We at Visual Meta are using the SCSS syntax. On the one hand as it was easier for us to convert our existing CSS files and on the other hand cause it’s also easier to learn SCSS when you just know CSS or even LESS.

Where does SASS help us ?

There were three main reasons to start using SASS on our platform: 1. better organisation of CSS code 2. all “variables” like colors, font-sizes in one place 3. helper functions for vendor-prefixed CSS3 properties Let’s go into more detail here. With SASS we were able to split up and organize our CSS into several smaller and well-named files (colors.scss, buttons.scss, header.scss, footer.scss). With that structure it is much easier to find and maintain CSS for specific blocks and sections or general appearance of the website. Only importing the necessary files into the page specific main files (by using the import feature of SASS), also reduced the CSS, which has to be loaded from the server (CDN), not only in size but also in quantity (only one file is loaded).
 
// _buttons.scss 
.btn { height:26px; line-height:26px; font-size:12px; display:inline-block; 
... 
} 

.btn-white { color:$black; background:$white; border: 1px solid $border-grey; } 
.btn-grey { color:$black; background: $light-grey; border: 1px solid $light-grey; } 
 
// page.scss 
@import ‘buttons’; 
// page specific css ... 
The second reason is quite obvious. Having all colors and font-sizes in one place makes it super easy to safely and quickly change appearance of the website. It will save us a lot of time while maintaining and reduces the probability to mess up other parts of the website or to forget to change a color definition in a second CSS file to a minimum.
 
// _colors.scss 
$blue: #26456f; 
$green: #9fbe3c; 
$orange: #f8aa1c; 
$red: #ee3c33; 

In object-oriented programming languages like Java you wrap code parts which are logically connected or serving a specific functionality into reusable blocks like classes or methods. In SASS you can define method-like “mixins” which may, for example, be used to ease up the usage of new CSS3 properties with vendor prefixes. We at Visual Meta created our own css-prefix mixin and use it to ease up the definition of other mixins for often used CSS3 properties like background-gradient, box-shadow or border-radius.
 
// _css3.scss
 @mixin css3-prefix($property, $value) {
 -webkit-#{$property}: #{$value}; 
-khtml-#{$property}: #{$value}; 
-moz-#{$property}: #{$value}; 
-ms-#{$property}: #{$value}; 
-o-#{$property}: #{$value}; 
#{$property}: #{$value}; 
} 

@mixin border-radius($radius) { 
@include css3-prefix('border-radius', $radius); 
} 
We are aware that Compass is providing those functionality out of the box, but we decided to write our own mixins for now to keep the code short and also reduce compilation time (see below).

What else?

We are using Maven for build and dependency managment of our projects. Therefore we decided to go for the sass-maven-plugin to compile our SCSS files to plain CSS files during build time. It integrates smoothly within our build cycle and so far we are quite happy with it, except one thing: speed. Even with disabled compass support it takes a lot of time to interpret our SASS files into CSS. As this is slowing down our whole frontend prepare step, we are right now evaluating other ways and libraries like libsass to speed up the process.

UPDATE:

We recently replaced the sass-maven-plugin with the libsass library. The result is: It is lighting fast!! With this change, we reduced our SASS compilation time from around 4 minutes to 15 seconds! What else should I say?
Category:
  Tech Corner
this post was shared 0 times
 000
Marcel Pierry
About

 Marcel Pierry

  (1 articles)

Marcel Pierry joined Visual Meta in 2009. He build the first version of the Ladenzeile Frontend, was part of several Re-Designs and is always concerned about website performance. Nowadays, he is leading the Frontend Engineering Team.

Leave a Reply

Your email address will not be published.