Today I’ve been working on a little website project, just for fun. Once again, I wish there was some good CSS preprocessor available, as sometimes (especially during development, before cleaning up the CSS) you need to alter several values in several places to change one little thing.
Some examples:
- Change some font color, which is used in several classes
- Change size of objects (eg. if you got 3 divs, which need to span 100%, and originally they were 33% 33% 34%, and you want the first one to be 50% and split the remaining space between the other divs, you need to edit all 3 values)
- …
This makes editting CSS files very error-prone.
A neat solution for this would be some sort of CSS preprocessor, so you could do things like this:
#define COLOR1 black
#define COLOR2 #ABABAB
.foo {
width: 40%;
color: COLOR1;
height: 10px;
}
.bar {
width: $(100% - .foo.width);
height: $(2 * .foo.height);
}This is, obviously, just a sample of what could be possible.
Did anyone ever work on something alike, or got some other method to tackle this?
Why don’t you (ab)use the C preprocessor? You can preprocess the CSS snippet in your post using the following:
$ cpp -P output.css
If you want to preserve comments, add the “-C” flag in the command line and you’re done! Sometimes I use the C preprocessor myself for this kinds of simple text expansion
Can’t you just use the good old ‘m4′ preprocessor? We use that for creating HTML at http://www.octave.org, and it works like a charm.
Just use the C preprocessor for that?
Fell out of bed feeling down. This has brgitehned my day!
b7RaHR sxnnbrlharph
I’ve used the c preprocessor for html (as have many others- I stole the idea from googling for an html preprocessor); it works fine with a caveat here and there (and some extra warnings to ignore) I don’t see why you wouldn’t use the same trick for CSS. google for HTML preprocessor, and you’ll likely find some working examples with suggestions for gcc flags to use, etc.
CleverCSS: http://sandbox.pocoo.org/clevercss/
Obviously cpp could be used for very basic variables (like COLOR1 in the sample). It doesn’t allow any of the other features I mention.
I used the template toolkit.
I’ve implemented a CSS preprocessor as a Makefile snippet that calls cpp: http://uwstopia.nl/blog/2007/12/a-simple-preprocessor-for-css-files
You can always use erb or some similar method (php cli etc.). Then you can add functions you need (if you prefere clean design write them first).
xml elements can have several css classes, so you can create template css classes holding only one variable. no preprocessor needed for that.
I know that’s possible. This still doesn’t allow calculations inside your CSS files though, and could introduce a huge amount of (unnecessary) classes. Even in relatively small stylesheets/sites it can become hard to know which stylesheet is used by which elements in the site.
If you’re using the same font colour in more than one class of things, you should split that properties section out and use multiple selectors:
.foo, #bar .baz, .bar:hover {
color: #defaced;
}
.foo {
height: 100%;
}
.baz {
height: 500em;
}
Obviously, this isn’t the only use case for a preprocessor.
why not just include style.php as your CSS file where you define $COLOR1 = “BLACK”; then where you need it
font-color:= or use whatever scripting language your server supports?
Stefan: Because my scripting framework/language (Django/Python) doesn’t allow in-template calculations etc. I’d just like some offline functionality.
The main issue, being able to refer to other element properties, is still not solved.
Try p4, the Perl based macro processor.
http://klicman.org/p4/
Please check out CSSPP
This should solve your problem
http://www.djangosnippets.org/snippets/432/