CleverCSS
Never, ever I will write plain old CSS, nesting rules over and over and renaming all the stack when the root element has to be changed.
Imagine this monstrosity
.featured_retailers {
border: 2px solid #FFC77B;
margin-bottom:10px;
width: 626px;
position: relative;
}
.featured_retailers table { width: 626px; }
.featured_retailers td {
padding: 0;
border-top: 2px solid #FFC77B;
}
.featured_retailers td table {
width: 440px;
}
.featured_retailers td table td {
border: 0;
padding: 1px 5px;
}
.featured_retailers p {
font-weight:bold;
color: #333;
position: absolute;
top: -30px;
right: 0;
}
.featured_retailers p img {
vertical-align:middle
}
turning into
$bgcolor=#FFC77B
.featured_retailers:
border: 2px solid $bgcolor
margin-bottom:10px
width: 626px
position: relative
table: width: 626px
td:
padding: 0
border-top: 2px solid $bgcolor
table:
width: 440px
td:
border: 0
padding: 1px 5px
p:
font-weight:bold
color: #333
position: absolute
top: -30px
right: 0
img:
vertical-align:middle
That magic is done by cleverCSS. It is written by maniacs (they added variable and expression support but went a bit too far: who would ever want to calculate sqrt of length?) but it gets the job done.
Original authors seem to have abandoned it, but it is supported by community. I added my two cents too:
- its calculation feature was not aware of negative numbers, trying to calculate the sum , so margin: -2px -2px was transformed into margin:-4px
- its support for /* multiline comments */ was not working, unless they were on the same line
And for integration of CleverCSS into your Django site there is django-css project. It is a CSS and JS compressor, but the compression is not what you would be after. The point is that django-css compiles CSS with external compilers, and caches the output in a clever way.
There were few things that could be improved there:
- It was relying on binary commands, while using Pythonic compiler in Python would be more logical.
- It was leaving compiled files not only in cache, but in my source tree, near the originals.
Also, I often use inline STYLE blocks for specific templates. Why have the hassle of separating them into files? The only reason can be that if page-specific CSS is large, the browser constantly redownloads it, and it is not nice.
So I added that feature to django-css too, and now it is almost perfect tool for complex Django CSSing. You can have extended CSS files compiled and cached, no matter where it is, in LINKS or in STYLE blocks.
All you have to do is surround your STYLE or LINK with {% compress css %} tag.
{% compress css %}
<style type="ccss">
h1:
color:red
<style>
{% compress css %}
Forked Repos:
PS: Github is a very nice collaborative tool, it is fun to work with. I just like BitBucket more 
This is a story about the passion. One that changes life, and one that is obviously is going to change the world. It already does.