Making my own CSS

Question

Don't worry, I'm not breaking the web :P

I'm annoyed by some stuff in CSS, and I'm going to fix it. It'll be syntactic sugar only, my language will be server-side compiled to regular CSS, so there's no need for special software on the client side.

My current ideas:

• Variables (actually, they're constants). You will be able to define colours and other things at the top (or anywhere) of the file and then refer to them from anywhere.
• Server-side includes. The @import statement does this as well, but it requires more HTTP requests. If CSS files are concatenated on the server, it's faster.
• Nested CSS blocks:

My code block:

#newsBlock {   
  background-color: red;
  ul.items {
    list-style: none;
    li {
      float: left;
    }
  }
}

Would be equivalent to normal CSS:

#newsBlock {
  background-color: red;
}

#newsBlock ul.items {
  list-style: none;
}

#newsBlock ul.items li {
  float: left;
}

Comments and other suggestions?

Answer 1

So in other words you're looking for Sass. Of course it would be whatever port for your particular server side language.

Answer 2

Why not use one of the already existing frameworks that do this instead of re-inventing the wheel?

• Less CSS
• Less CSS .Net

I'm sure there are others as well.

Answer 3

How about inheritance?

Answer 4

Actually what you're suggesting isn't really new. Take a look at the following:

Using variables in CSS style sheets

CSS Colors: Take Control Using PHP

Generating Dynamic CSS with PHP

It's an interesting concept.

Answer 5

there are other frames works like this. Kevin Yank's presentation on it here, you might find some ideas there.

http://vimeo.com/7530607