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:

  • Sorry, but I don't see any actual application for Magento. – Foo Bar Nov 26 '13 at 19:43
  • Why do you think that? It's more of a front end development thing than anything platform specific, it's a pre-processor at the end of the day. It lets you write and manage your CSS in a more modular fashion, and I don't know anyone doing RWD on a large scale not using a CSS pre-processor to manage a code base. Not to start that holy war you mentioned, but I don't think any of the reasons for not using a pre-processor you mentioned in your answer stand true. You can debug through firebug using fire-sass and chrome is getting/has got native SASS support. – Adam Nov 26 '13 at 22:56

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.

Instead I recommend going responsive by doing media queries by yourself. You will be amazed how easy is it. Time spent for getting into media queries is comparable to time required to get used with responsive frameworks. In theory you can make your Magento website responsive only using CSS media queries and some JavaScripts (w/o touching a single Magento template). Your site will stay clean, you will only have what you need and you will be absolutely in control of the code.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.