0

In less, this:

.nav {
  &_button {
      outline: 1px solid red;

      &-mod {
        color: red;
      }
  }
}

Compiles to this:

.nav_button {
  outline: 1px solid red;
}
.nav_button-mod {
  color: red;
}

OK, but now I want to us .nav_button as mixin; This fails with NameError: .nav_button is undefined:

.nav {
  &_button {
      outline: 1px solid red;

      &-mod {
        .nav_button;
        color: red;
      }
  }
}

This does not seems obvious too me, as well as I can not understand what is the less way to do this. So the question is - how can I invoke a class name with ampersand as a mixin?

shabunc
  • 23,119
  • 19
  • 77
  • 102
  • You can't. Well, there're certain tricks, but in general reusing a CSS-ruleset (meant to be used in HTML) as a mixin (meant to be used in Less) is usually a bad idea (for zillion reasons). If you need a reusable code just *write it as reusable code* (even it's more verbose). [Like this](https://gist.github.com/seven-phases-max/ec9a93f38277e7a06c6c1d956b9ee600). – seven-phases-max Apr 19 '17 at 10:04
  • @seven-phases-max I believe this could be count as answer actually and if you'll post it as answer I'll gladly accept it. – shabunc Apr 19 '17 at 10:05
  • Answer: I think there's already a lot of similar Q/As already so I'd rather find a duplicate (maybe later). As for "I can not understand what is the less way to do this" - in general there's no - `&` thing and nesting itself were never really meant to generate BEM-like identifiers (they can, but it's really just a "side-effect"). – seven-phases-max Apr 19 '17 at 10:08

0 Answers0