So, I’ve finally decided to add a CSS framework into my workflow, namely Blueprint. I’m not very skilled when it comes to graphic design (though I’m trying to learn) and the CSS frameworks out there give you some nice looking web pages. The only problem is they require you to add extra classes to each HTML element you want to use them with. The whole point of CSS is you can modify it without changing your markup. If I could set an id for each element (#content, #footer) and have each id style definition simply inherit the CSS framework classes I want to use my problem would be solved, but that can only be done using a CSS meta language and compiler.
I was looking at django-css, a project which would integrate CSS compilation into my Django projects, and it mentioned 4 popular languages: HSS, Sass, CleverCSS, and LESS.
Here’s a spreadsheet comparing the features:
Popularity
I think SASS is by far the most popular. I’m secretly rooting for it, since it’s probably in higher demand and would therefore be a more valuable skill to have, though it would be awkward introducing Ruby dependencies in a Python project.
Inheritance
The main reason I want to use a CSS meta language is for the inheritance. When looking at the documentation for CleverCSS I couldn’t see any inheritance implementation, which is a shame because it’s the only one implemented in Python and would’ve been easier to integrate into my Django project.
HASS example:
var nomargin = { margin : 0px; padding : 0px; }
pre {
$nomargin;
color : #FF0000;
}The inherited styles can’t be a normal CSS class, so this can’t be used to inherit classes from a CSS framework.
SASS Mixin example:
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table-base;
}
The inherited definition needs to be declared as a mixin, and I’d rather not modify any CSS frameworks. There is a project called Compass that provides CSS frameworks rewritten in SASS, but I’d rather not add yet another dependency into my project, especially a Ruby one (nothing against Ruby, it’s just undesirable within the context of a Python project).
SASS Inheritance example:
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}
Just what I want, but it generates more code than needed:
/* CSS */
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
LESS example:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
Generates:
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
Exactly what I need. The documentation says, “Any CSS class, id or element ruleset can be mixed-in that way.” And since it’s written in JavaScript, you can load your LESS files and compile them on the client side, which should make designing and debugging a lot easier. LESS best suits my needs, so it’s the one I’ll be going with.
Update: It turns out LESS doesn’t eliminate the inherited classes, they’re still present in the output. Even so, I still think it best suits my needs.
Update 2: It looks like django-css isn’t being maintained, so you should probably use django_compressor.
Seán Hayes 