The notion that it would be “slow as hell” is incorrect, yes slower than native CSS but a simple PHP script for variables and operators etc. wouldn’t, in most modern web applications, be the bottle neck. There almost certainly would be better targets for performance optimisation. If microscopic performance improvements do it for you then don’t use any frameworks for anything, they’re always slower, but they make life easier.

And it could give you much more than just variables and operators depending on your implementation but do you really need the other stuff? CSS has an inheritance model anyway (and let’s face it, not that hard) and the final compiled result is still a traditional CSS file with the big long selectors etc. Sure compiling is great and a brief look-up of output buffering would show you a very simple but effective way of achieving this. More efficient and clever methods could be easily built with just a little more effort.

Let’s remember that these frameworks are for rapid development, I think we’re in danger of implementing so many frameworks that the benefits are lost.

We’re going to look at the big three metaframeworks that exist right now: xCSS, SASS, and Less….

Hi – very good article!

One addition to LessCSS, if you use a Mac: There’s a very good free GUI tool called “Less.app” which automatically watches folders and recompiles on changes:

http://incident57.com/less/

mario

1. The first thing is to get Ruby installed. On Mac you’ll probably already have Ruby installed (open a Terminal and type ‘ruby -v’), on Linux you’ll need to install it from your package manager (best do a search on Google for ‘installing ruby on ubuntu’ or whatever).

For Windows, go to the Ruby website and download the One-Click Windows install (http://www.ruby-lang.org/en/downloads/). Open up a commandline (Start Menu > Run > type ‘cmd’) and ‘ruby -v’ to check it’s installed.

2. After that you need to install RubyGems. Gems are like plugins for Ruby. So download RubyGems (http://rubyforge.org/frs/?group_id=126), the .zip if you’re on Windows, .tar on Mac/Linux.

On Windows, extract the zip to somewhere easy to find (i.e. C:\rubygems). Then go back to the commandline and type ‘cd C:\rubygems’ (cd = change directory). Then type ‘ruby setup.rb’.

On Mac/Linux, open up a Terminal, then type ‘tar zxvf’ then drag the file you downloaded on the terminal window to get the path. Type ‘cd rubygems-1.3.5′ then ‘sudo ruby setup.rb’.

Done.

3. Now you’ve got Ruby and RubyGems installed you can install SASS: ‘gem install haml’. SASS is part of HAML, an alternative markup language for Ruby.

4. Install Compass if you want to use Frameworks.
‘gem install compass’

5. To create a new project using Compass from scratch use a command like:
compass -f blueprint project-name

Blueprint is the CSS framework, take a look at the Compass website for the other frameworks that are usable.

6. The SASS files (by default) are placed in the src folder, these are the ones you edit.

7. So you don’t need to keep re-compiling your stylesheets, switch to your project directory (‘cd project-name’) and run the command ‘compass -w’ (the -w is for watch). Now it’ll automatically update your style sheets.

When I asked other designers about it on DCTH (design chat Twitter hours) no one knew what I was talking about.

Looks like there’s a need for a plain-speaking geek to bridge the gap between design and CSS development!

That only gets you partially there. It really only gives you variables and operators, it doesn’t add the semantic structure that these frameworks do – mainly the nesting and “mixins”.

Also, simply turning on parsing for a file that is nearly completely static is a waste of resources and you need to write a small caching scheme for it at least.

In one of my “custom” php frameworks from the past I actually did php parsing on all javascript and css files – with caching built in. That does work well enough for what it is, it just doesn’t provide the more important things provided by the frameworks