You must have Javascript enabled to experience this site.

Using SASS with Eclipse

Posted & filed under Coding Tips.

I have been using LESS for awhile but there seemed to be more happening with SASS so I thought that I would give it a go.

netherland_cover150.jpgI started with Sass and Compass in Action from Manning Publications ( which is a good introduction, through to covering advanced topics.

I installed Ruby and SASS/Compass using the instructions in


Adding a Project Builder (see made automatic compilation easy as the builder runs whenever the SASS source is saved.

One issue was that Compass uses absolute paths for my images and I needed Eclipse SASS Builder configurationrelative paths (see Adding –relative-assets to my configuration properties in step 5 corrected this.

compile --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img" --relative-assets

Click the image to see full size


This just left syntax highlighting, so I added the Aptana Studio Plugin to Eclipse using the update site


One of the really neat features of Compass is the way it can automate spriting for you. (see

This means you can write code like

/* Create sprite using SASS */
/* */
@import "icons/*.png";
@mixin sprite_css($name) {
  @include icons-sprite($name);
  height: icons-sprite-height($name);
  width: icons-sprite-width($name);

#menu-about {
    @include sprite_css(Button-About-Normal);

Which will generate CSS like

/* Create sprite using SASS */
/* */
/* line 114, icons/*.png */
.icons-sprite, #menu-about, #menu-about:hover, #menu-menu, #menu-menu:hover, #menu-gallery, #menu-gallery:hover, #menu-locale, #menu-locale:hover {
  background: url('../img/icons-sc216b656e3.png') no-repeat;

/* line 133, ../sass/CSS-menu-sprites.scss */
#menu-about {
  background-position: 0 -168px;
  height: 28px;
  width: 100px;