Add support for "default" variables (similar to !default in SASS)

We are considering making the move from SASS to LESS, but the main obstacle for us is lack of a “default variable” feature (see http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_defaults_)

This feature is incredibly useful when distributing your SASS code as a library where the variables serve as a sort of “API” for your users. In such a use case all the user has to do is make sure his variables are included up front to override the defaults that he wants to change, and voila! no fiddling with ordering of the (possibly) many files that may contain the variables that need overriding.

I’ve started working on an implementation, haven’t written any tests yet but, hopefully we can use this pull request as a starting point for discussion: https://github.com/less/less.js/pull/1705

I chose the following syntax:

?foo: value;

as opposed to the SASS way:

@foo: value !default;

for 2 reasons - it’s more concise, and the !default syntax may present potential problems with expression parsing on the right hand side in the future (but I could be wrong about that).

The implementation I came up with was surprisingly simple - hopefully I haven’t missed anything important. I’d really appreciate any feedback you may have.

Cheers, Phil

[matthew-dean]

I was going to suggest the article I wrote and then saw @seven-phases-max had linked to it. 😄 Trust us, what you’re asking for already exists! But you have to understand Less’s variable evaluation to understand how/why it exists.

[matthew-dean]

I guess you’re simply missing the “Lazy-Loading” thing

@seven-phases-max WTF, you’re right. Dang it, I should probably delete my entire reply (and just did). You’re telling me you can import bootstrap, and just override specific vars, and it will just work?

I didn’t believe you, and did my own tests to verify it. How did I miss this?? I think it’s because every article I’ve seen on Bootstrap, which included customizing, recommended that you copy the variables.less file and set your own values, which of course causes issues when more variables are added to the library. And I think I had the impression that selectors were being output at the immediate point of import. Did variables always “lazy load” in this way?

This has to be the single most important commonly missed feature in Less. I’ve never seen a blog post about Less or a Less library that mentions this feature. Even with everything in the thread here, and the documentation, it wasn’t immediately obvious what that meant with real-world libraries. I thought everyone was simply saying you could override variables declared earlier by setting them later, and I never got that it would affect the evaluation of variables from earlier imported documents.

I can’t believe I never got this until now. This changes basically everything about how I structure my less documents, and it has a tiny mention in the docs that doesn’t demonstrate output.

Maybe the reason we get so many requests for a !default feature in Less is because few people intuit this feature or understand it from the brief example from the docs (including me, obviously).

At the very least, thanks for explaining it again @seven-phases-max!