Using SASS with Eclipse

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;



Need help? Let me take care of your IT issues.

Share this page

Scroll to Top