CODEWITHSUNDEEP
lessless-mixins
Nicolas Carteron
Nicolas Carteron

Reputation: 339

Use a mixin named parameter in LESS as a pseudo selector

My idea here is to create a LESS mixin that could add a pseudo element :before or :after to any element in my page.

I have tried to use the "Named parameter" of LESS mixins to create a generic mixin in which the user could specify whether the pseudo element should be a :before or an :after.

When I compile, I get an error: "Unrecognized input".

Here is my code:

.setInlineIcon(@iconx: 0; @icony: 0; @pos: before; @margin: 0; @margindir: right) {
  &:@{pos} {
    .setStructure(@h: 16px; @w: 16px; @d: inline-block; @va: middle);
    .getIcon(@iconx; @icony);

    content:"";
    margin-@{margindir}: @margin;
  }
}

Where .setStrucutreand .getIcon are two already existing and functioning mixins. Can you spot what's wrong?

Is it because I cannot use a variable as a selector in this way?

Upvotes: 3

Views: 575

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

: alone is not recognized as valid selector identifier. The workaround is to concatenate it to the identifier before selector interpolation:

.mixin(@pos) {
    @name: ~':@{pos}';
    &@{name} {
        /* ... */
    }
}

usage {
    .mixin(before);
}

Upvotes: 7

Related Questions