Nick Balestra Personal Blog

Using Sass to write DRY css

Here my first experience using sass to manage css.

1. first of all install sass (thats pretty simple, just:  $ sudo gem install sass (you can du without sudo too;-) 
2. then you can copy your actual css into scss: $ mv style.css style.scss  or you can convert it by doing : $ sass-convert styleOK.css styleOK.scss !copying means you’ll start of with an scss file that is exactly the same as your css, in other world you are just renaming it, as valid css syntax also apply to scss.
3. enable your text editor to allow syntax highlightening. In espresso this is pretty easy (works on espresso2 too).  Locate your application, right click & “show package content”, navigate to SharedSupport/Sugars/css.sugar. RIght click on it and again “show package content”, and open Languages.xml with a text editor. You’ll find <extension>css</extension> just copy this line and paste it afterward and replace css with scss or sass (<extension>scss</extension>). I personally prefer the .scss syntax as the .sass syntax rely exclusive on tabbing and to me this mean you’ll get some errors easily. Restart espresso and you should be ok.
4. apply mixins, use variables and everything you like, key word here is: DON’T REPEAT YOURSELF (DRY). and we all know how you have to repeat your self on css…
5. Sass have a nice option  that can allow you to watch a specific file or directory so that whenever you apply changes to the scss it automatically compile them on a new css for you. Just command-line: $ sass —watch style.scss:style.css and let sass do the homework for you (for the directory watching: $ sass —watch stylesheets/sass:stylesheets/compiled)
6. When you ready to go compile a compressed css for production this will save you quite a lot of kb (on my 1800lines css i went from 42kb to 30kb - that about 30% reduction ;-). to compile a compressed css just use: $ sass —style compressed style.scss style.css
7. don’t remember to use @include so that you bring all your difference css into a single on-liner css, you’ll see that browsers will love you more, oh yeah even i.e. :-P

you can find all the sass references here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html ah don’t forget to follow@TheSassWay they are really an helpful bunch;-)