Less Css - необходимо создавать скины css (используйте extension)

Question

Я должен создать обложку для темы WP, поэтому мне нужно сгруппировать все селекторы, которые имеют похожие свойства вместе (например, "цвет").

Любой совет, как я могу создать что-то вроде скина CSS с Less? Я закончил с этим решением...

h1, h2, h3, h4, h5, h6{
   &:extend(.heading-color);
   font-size: 12px;
}

.another-selector{
   &:extend(.heading-color);
   font-size: 24px;
}

.heading-color{
        color: red;
}

это выводит:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 12px;
}
.another-selector {
  font-size: 24px;
}
.heading-color,
h1,
h2,
h3,
h4,
h5,
h6,
.another-selector {
  color: red;
}

Это прекрасно работает, за исключением того, что мне нужно создать "поддельный" класс ".heading-color". Это хороший метод или я что-то упустил?

Answer 1

Вы можете написать свои "поддельные классы" в отдельном .less файл, а затем использовать @import (reference),

fake.less:

.fake {
  color: red;
}

real.less:

@import (reference) "fake.less";

.real {
  &:extend(.fake);
}

real.css:

.real {
  color: red;
}

Sass поддерживает заполнитель, который более удобен в этом сценарии. Меньше участников задумывались о реализации подобных функций (с более высоким приоритетом, см. https://github.com/less/less.js/issues/1177) более года... так что я думаю, что решение выше может быть полезным для вас,