CleverCSS
I was working on TextPress the last days, (I got motivated by the fact that WordPress has got security problems once more) and had to notice that CSS could need some variables. I wanted to write a simple preprocessor for css that inserts variables but ended up writing a small parser that accepts indented CSS code with inline expressions.
Basically what it does is converting this:
// Single Line Comment
foo = 4px
font_family = 'Verdana', sans-serif
base_size = 0.9em
/*
this is a multiline comment
*/
body:
padding: $foo * 4
font ->
family: $font_family
size: $base_size + 0.2em
a.foo:
background-image: url(foo.png)
span:
display: none
Into this:
body {
padding: 16px;
font-family: Verdana, sans-serif;
font-size: 1.1em;
}
a.foo {
background-image: url(foo.png);
}
a.foo span {
display: none;
}
The advantage might not be visible in that small example but consider complex layouts etc. One thing I would love to add is some support for layout extending. Say you have a base layout and you can say @extends(’layout.ccss’) and would get all the layout informations from the layout file. But I don’t know how useful this is.
Right now the conversion process is quite slow, but I wouldn’t generate such stylesheets on request. It’s a much better idea to do generate them from a script. During development one could still generate them automatically.
The module is available in the sandbox hg repo: clevercss.py. Just call clevercss.convert and pass it the CleverCSS markup.
Things that don’t work yet are unit conversions. For example you cannot do “1cm + 11mm”.