Use Dynamically Generated Classes as Mixins

This request is similar (though does not seem to be exactly the same) to the closed issues of #617 and #1133. It is also related to #1325 (both there and here seeks to “use” what Jon there calls “non-existent” classes, so the solving of one may solve the other). (If I missed a more exact statement of the same issue, forgive me for posting this new one.)

In all the issues use cases are sought, which I hope to provide here. The goal is to be able to essentially do the following (though it really becomes more powerful when in a loop structure):

Dynamically build a class name (which we can do now):

.myClassBuilder(@classname) {
   .@{classname} { some-properties: some values;}
}

.myClassBuilder(myName);

/* Outputs */

.myName { some-properties: some values;}

Then use that class name as a mixin (which currently gives a .myName is undefined error):

.my .big > .long .selector + .string {
    .myName;
}

/* Outputs */

.my.big > .long .selector + .string { some-properties: some values;}

Now as to reasons “why” to do it:

1. Since LESS is designed to use classes as mixins, intuitively users expect it to work (this is evidenced by the links given in the following reasons).
2. One use case is seen in this StackOverflow question trying to dynamically generate font sizing. Note how the user expected it to work. Now Martin’s answer given on that question is a good workaround for that case, but the workaround is still quite cumbersome compared to what the user wanted to do.
3. Another, perhaps more significant, use case is integrating with frameworks. In such a case, the framework may not be designed to make class properties accessible through a separate mixin like Martin advocated as a solution to the #2 problem. Further, the user of a framework like Bootstrap may not even know or understand the underlying code of Bootstrap itself, and not realize which classes are or are not dynamically generated. This is illustrated some in my answer on this StackOverflow question, which is the same one noted in issue #1325. In such a case again, the expectation is that .span3 would just “work” like any other class that can be used as a mixin (though there, it was really desired to be more “extended”).

The key benefit is in those instances where loops are generating numerical differences not only in class names themselves, but properties within those classes. Being able to dynamically generate a number of classes based on whatever formula one wants, and then also being able to use those as a mixin would seem worthy of the effort to implement the feature. I hope this basic idea and the use cases here are enough to warrant a deeper look into this idea.

[adamwathan]

Sorry if this is the wrong place to ask this, but from what I can tell it does seem possible to mixin dynamically created classes in many cases, but not in others and I can’t seem to get the mental model right.

Why does this example compile:

Example 1

.foo {
  .sm-p-1;
}

@spacer-1: 0.25rem;
@spacer-2: 0.5rem;
@spacer-3: 0.75rem;
@spacer-4: 1rem;

@spacers:
    .25rem,
    .5rem,
    .75rem,
    1rem;

.generate-padding-utilities(@i: 1) when (@i <= length(@spacers)) {
    @size: extract(@spacers, @i);

  
    .@{foo}p-@{i} {
        padding-top: @size;
        padding-bottom: @size;
        padding-right: @size;
        padding-left: @size;
    }

    .generate-padding-utilities(@i + 1);
}

@foo: ~"sm-";

.generate-padding-utilities();

…but this one doesn’t:

Example 2

.foo {
  .p-1;
}

@spacer-1: 0.25rem;
@spacer-2: 0.5rem;
@spacer-3: 0.75rem;
@spacer-4: 1rem;

@spacers:
    .25rem,
    .5rem,
    .75rem,
    1rem;

.generate-padding-utilities(@i: 1) when (@i <= length(@spacers)) {
    @size: extract(@spacers, @i);

  
    .@{foo}p-@{i} {
        padding-top: @size;
        padding-bottom: @size;
        padding-right: @size;
        padding-left: @size;
    }

    .generate-padding-utilities(@i + 1);
}

@foo: ~"";

.generate-padding-utilities();

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.