Невозможно определить повторно используемые списки селекторов через запятую в Less

Question

Рассмотрим следующий код Less:

.a {
  button,
  input[type='button'],
  input[type='submit'],
  input[type='reset'] {
    background: red;
  }
}

.b {
  button,
  input[type='button'],
  input[type='submit'],
  input[type='reset'] {
    background: blue;
  }
}

Что я хотел бы сделать, так это определить четыре возможных типа кнопок для повторного использования. Раньше я мог легко делать это в SASS, но переключился на Less, чтобы использовать Semantic UI. Я не могу найти синтаксис, чтобы сделать это в Less - это возможно?

Answer 1

Хорошо, теперь у меня есть решение, полученное из этого поста :

@all-buttons: {
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit'] {
    .get-props()
  }
};

.set-props(@selectors; @rules; @extension: ~'') {
  @selectors();
  .get-props() {
     &@{extension} { @rules(); }
  }
}

.all-buttons(@rules; @extension: ~'') {
  .set-props(@all-buttons; @rules; @extension);
}

.a {
  .all-buttons({
    background: red;
  });
}

.b {
  .all-buttons({
    background: blue;
  });
}

// Also enables an extension such as a pseudo selector for each button type
.c {
  .all-buttons({
    background: green;
  }, ~':hover');
}