CSS Preprocessors

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
sreynen's picture

Anyone using CSS preprocessors? They're pretty awesome. My coworker Joel recently wrote a blog post about how great LESS CSS is, and I just threw up a quick comparison chart of the alternatives, but that may be a little biased toward LESS, since that's what we've been using. It would be great to hear about everyone else's experiences and fill out that chart a bit.

Comments

offtopic

whatdoesitwant's picture

I dropped Less for a while because I couldn't find a parser (I'm ruby challenged). Thank you so much, I had no idea that this module existed. To be honest, I haven't tried any of the other preprocessors. Although I know that the Sass-syntax is less flexible. Could you speculate why xcss would be "overkill"?

As far as I am concerned it depends on your platform. Xcss has a processor for textmate and Less doesn't but to use textmate I would have to go back to OSX, and to be honest, with the finder and itunes and the open firewall I'd rather pull out my own intestines (so that statement is a bit biased perhaps). And I work in Aptana anyway.

In Less your existing css is valid. It has lovely color coding support in Aptana and I am happy to know that I can now parse it with Drupal itself. Aptana as a plugin to Eclipse runs on all platforms. But I then still appear to have an issue with regard to previews.
On Ubuntu, I could set my project folder in Eclipse directly to my theme folder on the (same) development machine. Disabling the cache would allow me to test manually. Perhaps using a rule on cron would get me close to an immediate preview (or a lot of errors), I haven't tried that yet. It should be possible to achieve this setup on an OSX environment as well.

So this may be a bit weird but I'm on Windows 7. It's currently the OS with the best ui (if you don't count htc sense). I'm not getting off of it either, at least until Kubuntu is stable. Gnome just feels too much like XP, which currently must be the biggest evil in ux alive (if you don't count finder). I use Ubuntu for my server environment (guest server os in a virtual machine as a service on the windows host) because linux is the best there is at what it does. But it doesn't do my daily stuff.

So how would I get Less set up on my environment? The short answer is that I still don't. I would have to wait for less.js.
Last year, though, I was succesfull in symlinking from the webfolder to the actual site files in a shared folder, making them available simultaneously from both environments. I might try that again. Honestly though, I liked splitting the editing environment (windows eclipse write) and the hosting environment (ubuntu lamp read): no conflicts. Also, I'm not sure how the shared folder system would play with git, or aegir for that matter.

Another semi-unrelated subject to mention is zencoding, which is nifty for html but also for regular css when you get the hang of it. Wouldn't it be cool to have it output Less?

As of the new Sass 3 beta

mason@thecodingdesigner.com's picture

As of the new Sass 3 beta release you have the option to use a very flexible syntax that looks a lot more like CSS (and LESS). If that was a roadblock for you I'd recommend checking out the new version. http://nex-3.com/?tag=sass

I love zencoding, btw.

--
d.o: canarymason
twitter @canarymason

I'm currently using sass with

SteveK's picture

I'm currently using sass with Compass to manage file watching and project structure. Less CSS seems to have similar capabilities to SASS which includes mixins, variables, math, and functions. I recently added sass core files to the Basic theme, although it's still a work in progress (haven't utilized mixins or variables, yet).

There is also a textmate bundle for sass, which I've been using as well. I've been working with sass as a preprocessor for about a year now and love it! The modularity of code that can be produced allows me to traverse through the code quite easily and efficiently. I don't think I can go back to writing plain ol' css again :)

Sass also has a built in tool to convert existing flat css files into sass-ready files via the "css2sass" command.

I'm also a huge fan of Sass

mason@thecodingdesigner.com's picture

I'm also a huge fan of Sass and Compass. I've been using it for something like 10 months and its changed and reinvigorated my workflow. The current recomended version of sass to use is actually the 3.x beta, and its pretty amazing. (http://nex-3.com/?tag=sass) In addition to the features that stevek mentioned in sass you get some great built in functions to manipulate color variables. You can lighten/darken, saturate/desaturate, mix two colors, manipulate just the R G or B values or the H S L values, and even change the opacity. That means auto conversion to RGBA. I love that one.

Compass is a tool that works with sass as an auto-compiler and a bridge to use it outside of ruby (like in standalone or Drupal projects). It also includes a ton of great mixins as well as the blueprint framework. Other extensions like 960gs are easily available too. This allows you to use the rules from these systems with any class, ID or DOM element you want as the CSS selector. It always bugged me that I had to use presentational classes like span-4 if I wanted to use a CSS framework.

Here's a link to the slides bangpound and I used in our Sass/Compass BOF at drupalcon. They might help with your comparison chart. http://docs.google.com/a/canarypromo.com/present/view?id=dd5cppm9_123dj6...

Bangpound even wrote a drupal module to be a wrapper around Sass/Compass. http://drupal.org/project/compass

--
d.o: canarymason
twitter @canarymason

nice! I had no idea there was

SteveK's picture

nice! I had no idea there was a BOF on this.. totally missed out. The new version of SASS also has "watch" functionality built in that may just take compass out of the picture for me.

I'm attending a Drupalcamp in the coming months and was going to do a talk on integrating a SASS workflow for drupal theming. Would you mind if I was to re-use some of your slides?