less-docs icon indicating copy to clipboard operation
less-docs copied to clipboard

Documenting dynamic property iteration (or whatever you want to call it).

Open AimForNaN opened this issue 5 years ago • 1 comments

After testing several ways on how to dynamically iterate over a set of properties, I've finally managed to get something practical for my needs. If such an example were in the documentation, much time and headache could have been reduced. I was trying to create a list of colors that I could iterate over that has access to its local scope, and mixins worked well here. (Detached rulesets and lists do not have access to their local scope, and lazy-loading does not seem to compensate for it. Would have been nice if at least detached rulesets could access their own scopes!)

This:

.colors() {
    blue: #00F;
    dark-blue: darken($blue, 10%);
    red: #F00;
}

each(.colors(), {
    .@{key} {
      color: @value;
    }
});

Will generate:

.blue {
  color: #00F;
}
.dark-blue {
  color: #0000cc;
}
.red {
  color: #F00;
}

Personally, I'm amazed this actually worked. Because I couldn't find anything on the internet similar to this, neither in the documentation, I have no idea of any undesirable consequences doing it this way. Would be nice to have this use-case documented.

AimForNaN avatar Jul 22 '20 00:07 AimForNaN

Just now came across a reference hidden deep in the issues: https://github.com/less/less.js/issues/3368#issuecomment-466424688

AimForNaN avatar Jul 22 '20 19:07 AimForNaN