less/less-docs

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

AimForNaN opened this issue · 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.

Just now came across a reference hidden deep in the issues: less/less.js#3368 (comment)