3 ms·
Coming from Less.js, the first example does not exactly fill me with joy: :root { var-header-color: #06c; } h1 { background-color: var
by micheljansen 15y ago
Coming from Less.js, the first example does not exactly fill me with joy:
:root {
var-header-color: #06c;
}
h1 {
background-color: var(header-color);
}
Compare that to Less:
@header-color: #06c;
h1 {
background-color: @header-color;
}
I can understand why they opted out of the @-notation in favor of something a bit more in line with existing CSS, but it just looks overly complicated to me.
- carbon8 15y agohttp://www.w3.org/TR/css3-syntax/#at-rules http://www.w3.org/TR/css3-syntax/#at-rules As I understand it, at-rules are basically directives to the CSS parser and, according to the spec, should be ignored if the parser does not recognize the identifier. Given that, the use of at-rules for variable names has always seemed, IMVHO, to break the purpose of at-rules.
- Kilimanjaro 15y agoYep, I'd be happy with this: $header-color: #06c; h1 { background-color: $header-color; }
- Kilimanjaro 15y agoOr even this: :vars { header-color: #06c; header-font: helvetica; } h1 { font-family: $header-font; background-color: $header-color; }
- wdewind 15y agoYep, see issue#1 on the proposal: "As defined here, the syntax for variable usage is different from the syntax for variable definition (i.e. var-foo for definition, var(foo) for usage). Some have suggested that the syntaxes should should match, using functional syntax in both cases. Others have suggested using a prefixed symbol instead of functional syntax (e.g. $foo) for both the property and usage."