Using Sass in NetBeans

In case you decide to skip the designer developer workflow enabled by DukeScript, and write the css yourself. Or if you would like to structure the css your designer created, you can use SASS.

Sass is really great if you’ve got complex hierarchical css structures, or position calculations, etc..

Honestly, I wouldn’t have been able to write my match3 game without it. I won’t give you a detailed overview of what SASS can do for you, since there are plenty of tutorials out there, I’ll just give you one little example. My game is using css for positioning and animating the objects: as you can see, there are 64 positions. Besides that every tile can be swapped with it’s neighbours, so there are between two and 4 swap positions for every single tile.

It would be a lot of work to calculate and add them to a css file by hand. So instead, I’m using SASS. In the scss file that SASS processes I’m using this bit of code:

        @for $i from 0 through  63{

            $top: floor($i / 8)*$tile_size;
            $left: floor($i % 8)*$tile_size;

            .tile.tile-position-#{$i} {
                top: $top+unquote($unit); 
                left: $left+unquote($unit);
            }
            .tile.tile-position-#{$i}.up {
                top: ($top -$tile_size)+unquote($unit);
            }
            .tile.tile-position-#{$i}.down {
                top: ($top +$tile_size)+unquote($unit);
            }
            .tile.tile-position-#{$i}.left { 
                left: ($left -$tile_size)+unquote($unit);
            }
            .tile.tile-position-#{$i}.right {
                left: ($left +$tile_size)+unquote($unit);
            }
        }

I guess for a developer it’s quite obvious what the code does. It generates all the positions and also the swap positions as css classes. This way I can be sure that the positions are correct, since they’re calculated instead of copied. But even more important, it saves me from typing about 1000 lines of css.

The best thing is, that in NetBeans scss is very well supported. You just need to open the settings and navigate to “HTML/JS”. There you can either let NetBeans install Sass for you, or point it to an existing installation.

Now if you create a scss file NetBeans will ask you to tell it where to put the compiled output. If you miss this, you can always correct it in a file called “nb-configuration.xml” that sits in the base dir of your project.

After that, whenever you make a change in your scss file and hit save, the css file is automatically generated. In Eclipse there’s probably a plugin for that as always :-). If you know how to do it there, let me know, and I’ll post it here for your fellow Eclipse users.