Recommend good ways of extending CSS

Question

I have been looking at LESS (http://lesscss.org/) which adds variables and macro like features to CSS. This means you can define an RGB colour once somewhere, then use that variable all through your CSS. Basically, it looks like a really cool solution.

However, it depends on Ruby, which is not part of my normal dev stack, so I thought I would ask here to see if anyone knows of similar CSS extensions that are implemented in other languages that I might be able to add to my tool chain more easily? Thanks.

Answer 1

You can google 'variable css via php'. There are various sites that show you how you can use php to generate your css.
The php-css route is nice if you're developing themes for a website.

Answer 2

While there is constant debate over it, I really like the concepts behind CSS JSON. Of course this means that if javascript isn't enabled, your styles go away too.

Code your style-rules in JSON giving you the ability to use functions, variables, and more in determining values:

var cssjson = {
  ".copy-1":{
    "font-family":"Verdana, Geneva, Arial, Helvetica, sans-serif",        
    "font-size":"11px",
    "color":"#CCC"
  },
  "div#container div#header":{
    "CSSJSON-INHERIT-SELECTOR":".copy-1",
    "position":"absolute",
    "top":"12px",
    "left":"4px"
  }
}

This has then been taken and implemented into tools like CSSugar:

CSSugar(
  {
    //match every even tr element
    "tr:even" : {
      "background": "pink"
    },
    //match every input element of type text
    ":text" : {
      "fontFamily": "Verdana",
      "fontSize": "11px",
      "color": "green"
    },
    //match the second div in the body 
    "body div:gt(1)" : {
      "background": "orange"
    }
  },
  //lets use the jQuery selector engine
  $
);
//now feel the power, even in IE6!

Answer 3

A recent article in Smashing Magazine mentions the following tools:

dtcss (PHP preprocessor for CSS)

#define mp margin, padding
#define bg background
#define fg color

#define FONT Verdana, sans-serif

html, body {
        mp: 0;
        bg: #000;
        fg: #eee;
}
body {
        font: small FONT;
}
input, textarea {
        font: 1em FONT;
}

.fancy {
        border-top-left: 2px solid #00f;
        border-bottom-right: 4px dashed #f00;
        b {
                color: yellow;
        }
}

JSON CSS (based on jQuery) -- see Jonathan's answer

I don't have any experience with either of these, but I'd be interested in hearing experiences from others :)

Answer 4

Look at CSS&JS: http://taat.pl/en/cssjss/#additional

It’s a simple script that compresses Javascript and CSS files on the fly. And it’s smart — uses a cached copy, adds cache-related heqders, cleans up the code/styles. Above it all, it has support for basic CSS variables.

It’s written in PHP.