[css-variables] Proposed implementation needlessly complex

Web developers have long taken advantage of CSS metalanguages like Sass or
LESS to make the benefits of variables a reality before this spec was
introduced. The problem I see with the spec as currently written is that
the W3C's implementation differs quite a bit from the accepted conventions
of these metalanguages.

Variables should be easy: define a symbolic name for what you need and set
it to a value. In order to retrieve the value, use the variable's symbolic
name. To use Sass's implementation as an example:
$link-color: blue;
a { color: $link-color; }

LESS's implementation differs only in the initial character used to define
a variable, it uses the @ symbol instead of the $. In contrast, the W3C's
proposed implementation is needlessly complex. The W3C equivalent to the
above example:
:root { data-link-color: blue; }
a { color: data(link-color); }

According to the W3C, defining a variable is accomplished by data-*
properties[1]. That convention seems to have been proposed only due to the
"similarity to the custom data attributes" in HTML5. The issue here is a
matter of semantics. Data attributes in HTML do not define variables, but
properties of an element, and more than one data attribute of the same name
can and usually does exist in a HTML document. Using the same notation to
define a variable name that shouldn't change doesn't make sense.

Also, the use of the data function in order to output the property's value
is confusing and results in more complex and less readable code. The return
output of a function isn't a "variable" in the common sense of the term.

I believe that the proposed CSS Variables spec should embrace the prior
implementation lead provided by Sass or LESS. It will result in a clearer
spec and acknowledge the practices already in use by web developers
everywhere.


[1] http://dev.w3.org/csswg/css-variables/#data-property