LESS own syntax for Custom Properties

[katerlouis]

I really do not like the syntax of custom properties and I want to suggest a simple "search&replace" solution for a preprocessor. (At least my layperson mind things it's ez to implement :O)

actual syntax

--my-font: Awesome Font;
font-family: var(--my-font, Robot, Helvetica); / with fallbacks

my suggestion

$my-font: Awesome Font;
font-family: $(my-font, Robot, Helvetica);

or

$color: #ff92ea;
$color2: #22adf2;
border: 2px solid $$color;
background: linear-gradient($$color, white, $(color2, yellow));

The idea put in words:
Declaration = $ 1 Dollar
Usage = $$ 2 Dollars OR $() 1 Dollar + parenthesis (maybe use 2 here aswell for consistency?)
LESS then compiles to actual custom property syntax

PROS
– Much easier to write and read
– The $ is easy to distinguish from the LESS-var @.
– Developers are used to the $ from jQuery and PHP
– Sass users will we confused 😎

CONS:
– Sass users will be confused 😭

What do you say?

PS:
please assign "Suggestion" / "Feature Request" label; I am not allowed to :(

[matthew-dean]

This conflicts with (or closely matches) property referencing syntax, which is already added to the Less 3.0 development branch. As of Less 3.0, you can write it like:

.element {
  color: #ff92ea;
  @color2: #22adf2;
  border: 2px solid $color;
  background: linear-gradient($color, white, @color2, yellow);
}

[katerlouis]

Excuse me, may I request a quick summary on property referencing syntax?
I hope and guess you mean that my idea is already part of LESS 3.0– But.. I'm confused ;)
I quite don't understand what $color is actually doing in your example, since there is no declaration seen.

[matthew-dean]

Basically the $prop syntax just means you can reference a declared property from within another value. So yes, color is being declared in the first line, and then is referenced with $color within the border value. Such that, this:

.element {
  color: #ff92ea;
  border: 2px solid $color;
}

results in:

.element {
  color: #ff92ea;
  border: 2px solid #ff92ea;
}

Another way to understand it is that properties in 3.0 are basically being treated like variables, except that the property will be in the resulting output.

This is similar in Less to how simple class and id selectors are also mixins.

That is:
.mixin { foo: bar; } and .mixin() { foo: bar; }
can both be referenced with the mixin call:
.mixin();.

The only difference is that the simple selector definition without parentheses will be in the resulting output.

So, in Less 3.0, similar to how selectors can be used as mixins, properties can be used as variables.

---

As far as using any custom Less syntax to output custom property syntax, I'm not sure it would be a good fit. For another thing, you're only saving yourself one or two characters. $color vs --color is not that big a difference, and it seems like it would unnecessarily obscure your code. Less generally doesn't adopt code that obfuscates what the result will be. PostCSS does more of that approach that you're looking at, where it's basically a series of transformations on styles nodes. So you may want to look at something like that, if you're basically wanting to put in one syntax and get out a different syntax.

That's not to say you couldn't do it at all with Less. You could always do something like:

.-(@prop, @var) {
  --@{prop}: @var;
}
.element {
  .-(my-font; Awesome Font);
}

produces:

.element {
  --my-font: Awesome Font;
}

But.... I don't understand why someone would ever want to do that. Seems pretty pointless just because you don't like a certain syntax in CSS.

[katerlouis]

Veeery interesting– Thank you very buch for this highly detailed explenation. I appreciate it.

Although I see your point, that my request would interfere with 3.0s new property handling, I disagree with your saying that I only save a few characters. Especially calling vars is a mess to write AND read.

var(--color1) vs $color1 or %color1 then.

Anyhow. Where can I read more about this mixin-style-property-feature? I have a lot of questions regarding this concept.

[seven-phases-max]

Where can I read more about this mixin-style-property-feature?

#2433 and #2654

---

Speaking of the proposal itself, two remarks:

1. First of all, it's not a good idea for a CSS preprocessor to try to extend or in general change somehow the functionality of the native CSS-vars facility simply because the native CSS-vars use the HTML scope and this is something a pre-processor has no access to (by definition of "pre"). I.e. by doing you'll have a broken not compatible implementation, unless you're agreed to limit your CSS/Less codebase to a narrowed feature subset (e.g. global/root variables only) and this is again flawed.
2. The fact that the proposal for a Less-feature uses CSS-variables and not Less-vars makes a suspision that the proposal simply comes from missing common Less functionality and features (just like those in Allow guards to work with undefined variables #1400 and Add support for "default" variables (similar to !default in SASS) #1706).
   E.g. compare, your proposal:

--my-font: Awesome; /* custom value */

p {
    font-family: var(--my-font, Robot /* fallback value */);
}

div {
    font-family: var(--my-font, Robot /* fallback value */);
}

and the same using typical Less implementation:

@my-font: Robot; // fallback value

p {
    font-family: @my-font;
}

div {
    font-family: @my-font;
}

@my-font: Awesome; // custom value

(I intentionally use the variable twice to illustrate that in many use-cases the existing Less way is actually more compact and more easy to maintain).

---

Aside of above I see no problem for the function (not necessary tied to --css-var syntax) to be implemented in a plugin (after all I myself is a fan of "fallbacks" when I write my JS or C++ code :P) and see its outcome. It's indeed just a few lines of code, less than the text of the proposal itself.

[Hakuz]

Less throws parse exception if I add the CSS custom properties. Does LESS supports CSS custom properties?

[matthew-dean]

@Hakuz As a general principle, yes, with some caveats. Are you using the latest version of Less, and what's the content of your custom property?