3

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?

Harry
  • 87,580
  • 25
  • 202
  • 214
Nicolas Carteron
  • 321
  • 2
  • 6
  • 1
    Yes, this is known issue with current Less versions. `:` alone is not recognized as valid selector identifier. The workaround is to concat the `:` to a pseudo selector string before selector interpolation, e.g: `@name: ~':@{pos}'; &@{name} {...}`. – seven-phases-max Apr 16 '14 at 14:37
  • @seven-phases-max thanks a lot for your comment, your workaround worked! It seems I get the same issue with my margindir however, it only works if I comment the line out. Tried the same workaround but it wouldn't work. – Nicolas Carteron Apr 16 '14 at 15:02
  • `margin-@{margindir}: @margin;` is correct and should work fine provided that you use a compiler that actually supports this feature (Less or less.php >= 1.6.0). – seven-phases-max Apr 16 '14 at 15:54
  • Thanks a lot, I hadn't updated to the latest version, I was on LESS 1.5.x... :) – Nicolas Carteron Apr 16 '14 at 16:08
  • @seven-phases-max could you formulate your comments as an answer, please? so i can be accepted – Bass Jobsen Sep 13 '14 at 23:28

1 Answers1

7

: 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);
}
seven-phases-max
  • 11,765
  • 1
  • 45
  • 57