- From: Praveen Puglia <praveenpuglia@gmail.com>
- Date: Fri, 25 Dec 2015 00:41:35 -0500
- To: www-style list <www-style@w3.org>
- Message-ID: <CANfatsr+zK04pdZ=1RZYPpaxEuxVKnUsnOiOb53=-PJroaq9zA@mail.gmail.com>
I am not really fond of the var() syntax and I made a tweet about it. I was
glad to get a reply from @csswg to post my response here. A formatted
version is available here
<https://gist.github.com/praveenpuglia/825acfb9f45c24a723fd>.
I am also sure that the working group must have thought about exhaustive
scenarios so I may not even be making a point.
I know $ or @ couldn't be used since they were already getting used in
pre-processors and @ specifically, I feel, wouldn't go with the existing
syntax of CSS.
I met Chris Lilley few days ago and I came to know that $ could be used but
it would create multiple problems.
   - Breaks existing preprocessor syntax. I would be okay with it as long
   as the working group released an officialrecommendation with that and Sass
   sort of stopped using it or came up with a feature flag to use either Sass
   variables or Native CSS variables.
   - Users would get confused about Sass variables and CSS variables.
What about not using var() at all?
As far as I can say( and that's not too far ) I don't see a problem in
using --variableName in RHS and getting it's value evaluated. If it's on
L.H.S it just assigns whatever is on the R.H.S.
Example -
:root {
    --primaryColor : blue; /* Assignment/Storage*/
}
a {
    color : --primaryColor; /* Evaluation */
}
Other cases are I think ruled out via this example -
http://www.w3.org/TR/css-variables/#example-3ab19e31
Would the parsing lead to ambiguous situations? If so, can you please
provide an example so I can understand it better. Again, I am a noob.
I don't see it being an issue with calc() either since you the operators
inside require space around them. The following could work.
:root {
    --fakePadding : 10px;
}
li {
    width : calc(50px - --fakePadding);
}
With -- before variable name, it feels like it used an extra character
which it shouldn't be. How about some other characters?( No idea if they
impact CSS parsing.)
=foo /* It's a little weird too */
&foo
/* OR A COMBINATION OF TWO THINGS?*/
--foo /* sets the variable and...*/ &foo /* get's it? */
I am really unaware of other usecases but would love to know where some of
these can fail and why they are bad. That would be so much wisdom! :)
--
Thanks!
Praveen ✧ praveenpuglia.com ✧ @praveenpuglia
<https://twitter.com/praveenpuglia>
Received on Friday, 25 December 2015 05:42:23 UTC