Improving css by using SASS and compass

On vih.dk I had a layout which is several years old, and it is mainly suited for viewing on a desktop. I wanted to start the transition to making the layout mobile.

To make the transition easier, I wanted to start using a preprocessor. I successfully used LESS on odder2014.dk and was very satisfied, but for this transition I eventually wanted to be able to use the power of compass. Therefore, I chose SASS for this project. I’ve also recently introduced navbar and panopoly features to the site, and since radix also use compass and sass this seemed as a good bet.

Rewrite existing css to sass

SASS and compass are local development tools, which you do not necessarily need on the server. There is a lot of ressources on the internet on how to install and use the languages. I’ve just followed them.

Then on my project, I started by adding a new branch, so I would not destroy any of the current work. Basically, I created a new folder called scss and copied my existing css-files to that. Now I made sure that sass watched the folder and automatically compiled the css to the css folder. Because css is also valid SASS, it worked automatically.

sass --watch

Then I started reorganising my css, and used the nested properties of SASS, so I got at good structure on my existing css. It took about an hour and you can see the difference before and after.

Enter compass to introduce CSS3 features to the existing theme

To make it easier to switch to a more mobile friendly layout, I wanted to switch from the old method of achieving rounded corners using images to the new CSS3 features for generating the same effect using pure css. Compass has a lot of really nice features, which makes this a whole lot easier called @mixins.

E.g. to generate the highligted box in the top of the page using old style css, I used the following code:

#highlighted { 
  width: 469px; 
  height: 85px; 
  background: url(../images/layout/tel-base.png) no-repeat 0 0; 
  margin: -100px 0 0 623px; 
  float: left; 
  display: inline; 
  font-size: 1em; 
  line-height: 1.4; 
  position: relative; 
} 
#highlighted .region-highlighted { 
  padding: 10px 20px 20px 42px; 
} 
#highlighted h2 { 
  margin-top: 0; 
  margin-bottom: 0; 
  font-weight: bold; 
}

After rewriting this part to using compass, I am no longer using an image, but using the @border-bottom-radius() and @box-shaddow()-mixins I was able to ditch the background image, and only use css for this effect. This makes it much easier to switch e.g. branding colors or whatever, I want to change.

#highlighted { 
  display: inline; 
  font-size: 1em; 
  line-height: 1.4; 
  background: white; 
  border-left: 5px solid $branding-color; 
  border-bottom: 5px solid $branding-color; 
  border-right: 5px solid $branding-color; 
  @include border-bottom-radius(10px); 
  @include box-shadow(black 5px 5px 5px); 
  width: 469px; 
  margin-top: -110px; 
  float: right; 
  .region-highlighted { 
    padding: 10px 10px 10px 20px; 
  } 
  h2 { 
    margin-top: 0; 
    margin-bottom: 0; 
    font-weight: bold; 
  } 
}

So the entire css has been rewritten to compass and next step will be to introduce breakpoint for creating the mobile friendly layout. You can see the entire code on github.com.

Using panels style plugins for commen elements

I had some styles which were duplicated several times to make a grey background with rounded corners on some elements on the page. These, I also ditched and created some panels style plugins, so I only needed to write the code once, and the content editors could change the style for the panel panes themselves from the panels ui.

There is still a lot of room for improvement, and comments are more than welcome. I am still learning.