Использование охранников в миксине

Question

Я хочу создать умный миксин для источников Bootstrap (mixin->buttons.less).

То, что у меня есть, выглядит следующим образом:

Меньше:

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  /* this variables must be used when I have parent's  class="invert"*/
  color: @background;
  background: @color;
  border-color: @background;
  /* end */

  /*when not - use variables in the beggining of mixin */

}

Как я вижу, используя этот миксин

.btn-primary,
.btn-primary-invert{
    .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}

Могу ли я сделать что-то, как я хочу? Я понимаю, что это может быть сделано с меньшим количеством охранников, но не понимаю, как его использовать. У кого-нибудь есть идеи?

Answer 1

Самый простой подход заключается в использовании родительского селектора (&) как в приведенном ниже фрагменте и забудьте об использовании охранников. Здесь миксин по умолчанию создает как нормальное, так и инвертированное состояние для всех кнопок. Вы можете использовать это, если хотите, чтобы оба состояния были применимы для всех кнопок.

.button-variant(@color; @background; @border) {
  &{
    &:hover, &:active{
      color: @color;
      background-color: @background;
      border-color: @border;
    }
  }
  &-invert{
    &:hover, &:active{
      color: @background;
      background: @color;
      border-color: @background;
    }
  }
}

.button-primary{
  .button-variant(#000; #fff; #777);
}

Приведенный выше фрагмент кода при компиляции приведет к следующему CSS:

.button-primary:hover,
.button-primary:active {
  color: #000000;
  background-color: #ffffff;
  border-color: #777777;
}
.button-primary-invert:hover,
.button-primary-invert:active {
  color: #ffffff;
  background: #000000;
  border-color: #ffffff;
}

---

Если вы действительно хотите использовать охранники для каких-либо предпочтений (например, вам не нужно ни одно из состояний для определенной кнопки), то вы можете использовать фрагмент, как показано ниже. Для использования охранников вам необходимо отправить дополнительный параметр, который указывает тип, на основании которого можно проверить охрану.

.button-variant(@color; @background; @border; @type:normal) {
  & when (@type = normal){
    color: @color;
    background-color: @background;
    border-color: @border;
  }
  & when (@type = invert){
    color: @background;
    background: @color;
    border-color: @background;
  }
}

.button-primary{
  .button-variant(#000; #fff; #777);
}
.button-primary-invert{
  .button-variant(#000; #fff; #777; invert);
}