In fact, there is only one thing I'm missing in CSS. But I miss it virtually every day: a kind of reusable parameters. What does it mean? Very often, I create a large stylesheets for a large project. A color palette is given and color codes are repeated many times through the stylesheet. It would be very nice to be able to predefine those colors as parameters (or user-defined keywords) at the beginning of the stylesheet, and then only use these symbolic values. Something like this (the syntax doesn't matter now):
@define {
baseText: #003366;
canvas: #f0f0f0;
}
body {
color: @baseText;
background: @canvas;
}
a:hover {
color: @canvas;
background: @baseText;
}If I need to replace a color in whole CSS, I could only edit one value in
the @define section. If I want to change the color palette of the
web site at once, I could edit only these predefined values.
Or, why use it for colors only? These substitutions could be useful in many ways.
@define {
textColor: #003366;
emphColor: #660000;
canvasColor: #f0f0f0;
baseFont: "palatino linotype", palatino, serif;
titleFont: "Helvetica Narrow Black", Impact, Techno, sans-serif;
stdPadding: 0.2em 2em 0.3em 1em;
}
@define {
stdBorder: 1px solid @textColor;
}
body {
color: @textColor;
background: @canvasColor;
font: 1em/1.67 @baseFont;
}
h1 {
color: @emphColor;
font: 250%/1 @titleFont;
}
.box {
padding: @stdPadding;
border: @stdBorder;
}Something like this would be very helpful in CSS 3.
Note: I'm sorry for this english spot on a non-english blog. I have no better place for it now. Comments in english only, please (if one is able to publish a comment through a Czech form).
