Hi all
I’m brain storming on ways how to optimize the act of writing good
CSS… My plan is to create some sort of Meta-CSS-Language that is
parsed by a translation-processor which outputs the “normal” CSS code
(packed into a Ruby On Rails plugin).
I want to be able to write sort of the following quasi-CSS-code (the
$-sign is sort of a placeholder for the surrounding context, see
comments):
body {
font-size: 12px;
}
div#content {
font-size: 20px;
}
ul.links li {
background-color: red;
list-style-type: none;
list-style-image: url(“li.png”);
$:first { /* is the same like “ul.links li:first” */
padding-top: 10px;
}
$:last { /* is the same like “ul.links li:last” */
padding-bottom: 10px;
}
ul.links_external li {
list-style-image: url(“li_external.gif”);
}
ul.links_download li {
list-style-image: url(“li_download.gif”);
}
div#content $ { /* is the same like “div#content ul.links li” */
font-weight: bold;
}
$ a { /* is the same like “ul.links li a” */
color: red;
text-decoration: none;
padding-left: 20px;
background-image: url(“a.gif”);
background-position: center left;
background-repeat: no-repeat;
div#content $ { /* is the same like "div#content ul.links li a" */
background-image: url("a_big.gif");
}
$:hover { /* is the same like "ul.links li a:hover" */
text-decoration: underline;
background-image: url("a_hover.gif");
div#content $ { /* is the same like "div#content ul.links li
a:hover" */
background-image: url(“a_big_hover.gif”);
}
}
}
}
This should be converted by the engine to the following:
body {
font-size: 12px;
}
div#content {
font-size: 20px;
}
ul.links li,
ul.links_external li,
ul.links_download li {
background-color: red;
list-style-type: none;
list-style-image: url(“li.png”);
}
ul.links li:first,
ul.links li.first, /* For browsers that don’t know :first… */
ul.links_external li:first,
ul.links_external li.first,
ul.links_download li:first,
ul.links_download li.first {
padding-top: 10px;
}
ul.links li:last,
ul.links li.last, /* For browsers that don’t know :first… */
ul.links_external li:last,
ul.links_external li.last,
ul.links_download li:last,
ul.links_download li.last {
padding-bottom: 10px;
}
ul.links_external li {
list-style-image: url(“li_external.gif”);
}
ul.links_download li {
list-style-image: url(“li_download.gif”);
}
div#content ul.links li {
font-weight: bold;
}
ul.links li a {
color: red;
text-decoration: none;
padding-left: 20px;
background-image: url(“a.gif”);
background-position: center left;
background-repeat: no-repeat;
}
div#content ul.links li a {
background-image: url(“a_big.gif”);
}
ul.links li a:hover {
text-decoration: underline;
background-image: url(“a_hover.gif”);
}
div#content ul.links li a:hover {
background-image: url(“a_big_hover.gif”);
}
I hope you’re getting the point… 
I came to that idea because CSS2
does not allow anything like inheritance or “mix in” of code. So I want
a translation-engine to fill this hole for me in my Rails projects:
write clean code (DRY) and expand it automatically so browsers get it.
But… I had never to do something like that, so I wonder what libraries
or stuff do already exist to help in such cases? I guess I heard the
word “Tokenizer” in this context already, but I’m not sure…
Or should I create my own Rails template system (I don’t really know
what they are capable of and if a task like this is really what they
have been created for)?
As a not very experienced Ruby programmer, I would just start using many
many regular expressions or something like that and try to hack
something together, but I guess there are better ways to do this…
Thanks a lot for help,
Josh