Has anyone using SASS/Compass framework with Magento. Is it worth using such frameworks?
What is the preferred way of building responsive site with Magento.
I've been using both SASS and Compass in all our Magento sites for over a year and it works really well. The variables, nested rules and mixins all benefit. We can change the whole colour scheme, column widths and spacing of a site just by tweaking a few variables.
We don't create any overhead by installing any SASS compilers on the server and opt to do it locally instead. This all depends on your workflow though.
Compass or SASS doesn't create any overhead at all on their own. If you opt for Foundation (who just released version 5 recently) you can choose to include/exclude any of their default CSS classes or JS (you don't actually need to use any JS if you just want the grid).
The structure of your SASS/SCSS will be much more modular as well. It should all be split into multiple files, containing vendor and partials making it much easier to include and exclude CSS blocks.
You're code can be even cleaner than just writing vanilla CSS and compile to identical results. The only thing you need to watch out is if you're changing more than 3 selectors (minus psuedos) together as it creates bad performing CSS.
In all, there's a lot of different ways to use SCSS/SASS, I would take a look into using Grunt to automate your compiling (and livereload browser on compile), along with CSSC to concat all your media queries from different files. Have a look at SMACSS and OOCSS for ways to structure your SCSS in a modular way.
Few links for a bit of reading and to show the power of using SCSS vs CSS:
SASS and Compass are not intended to make your website responsive. There are some other frameworks which are doing so (Twitter Bootstrap, Zurb Foundation, Skeleton etc).
However I personally don't recommend using them with Magento. It will create more overhead which might be not worthy the "benefits" of fluid grids etc. It will also require large amount of templates to be overridden plus it will make your website a bit heavier which is not good for mobile devices. You will be tied to frameworks upgrades and (maybe I'm paranoid about doing everything clean but) still you will have a lion share of a functionality you never use sent to clients browser with each request.
Also most of these frameworks will strap jQuery in which is again additional overhead.
Couple of words about LESS, SASS and Compass. These fancy stuff are aimed to make a development easier (which is also a question to me) but in the end your visitor gets an old good CSS. I don't want to start another holy war here. I just don't use those technologies.
Ah, and when it will come to debugging through firebug/web-inspector you will get an unpleasant surprise from LESS/SASS.