Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

&:extend Interpolated Selectors Not Working #1752

Closed
srsgores opened this issue Dec 21, 2013 · 4 comments
Closed

&:extend Interpolated Selectors Not Working #1752

srsgores opened this issue Dec 21, 2013 · 4 comments

Comments

@srsgores
Copy link

Using less-1.5.1, the it appears that LESS is unable to extend interpolated selectors, or generated mixins. The following will not work as expected:

@delay-increment: 0.3s;
@delay-maximum: 10;

/* Animation mixin */
#animation {
    .animation-delay(...) {
        -webkit-animation-delay: @arguments;
        -moz-animation-delay: @arguments;
        -o-animation-delay: @arguments;
        -ms-animation-delay: @arguments;
        animation-delay: @arguments;
    }
}

/* Animation Delays */
.delays(@index) when (@index > 0) {
    .delayed-@{index} {
        @time: @index * @delay-increment;
        #animation > .animation-delay(@time);
    }
    .delays(@index - 1);
}
.delays(0) {}
.delays(@delay-maximum);

.container {
    &:extend(.delayed-2);
}

It will yield only the generated delayed classes:

/* Animation Delays */
.delayed-10 {
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
}
//all the way to 1 -- nothing is extended

It's as if the generated class doesn't exist. And as you'd expect, doing delayed-2 results in .delayed-2 is undefined.

Thanks in advance for fixing.

@seven-phases-max
Copy link
Member

Duplicate of #1325 (also see #1485, #1597 and all crosslinks there). Those issues may differ in details but in general they all are about the same: "Extend dynamically generated classes".

And as you'd expect, doing delayed-2 results in .delayed-2 is undefined.

This is another feature: #1196 (already implemented in the master).

@seven-phases-max
Copy link
Member

Also not denying the importance of #1325, I feel like I need to express an opinion on your aproach for the particular use-case. You pregenerate ~30 CSS classes with 5 properties in each -> 150 CSS properties that may never be used, are you sure this is optimal? (Actually #1177 + (optionally) a tool like autoprefixer would be much better solution for this use-case).

@srsgores
Copy link
Author

@seven-phases-max, that's why I use @import (reference), which was introduced in 1.5. Only when you extend, does the code appear.

@seven-phases-max
Copy link
Member

@srsgores I see, still #1177 (provided it is implemented with > 0-parameter mixin support) would be better way to do it than #1325 on top of @import(reference). Especially taking into account that the first may have natural extend(.delay(.6s)) syntax while the latter has meaningless extend(.delay-2) (I'm just trying to weight which one would be more rational to upvote :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants