Существует ли общий способ добавления префиксов поставщиков в LESS?

В настоящее время у меня есть файл mixins.less, где почти все микшины в основном одинаковы:

.border-radius(@radius) {
  -webkit-border-radius: @radius;
   -khtml-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box-shadow(@value) {
  -webkit-box-shadow: @value;
   -khtml-box-shadow: @value;
     -moz-box-shadow: @value;
          box-shadow: @value;
}

Есть ли способ создать какой-то общий микс, который я мог бы назвать следующим образом:

.vendor('border-radius', '3px');
.vendor('box-shadox', '10px 10px');

и который даст тот же результат, что и выше?

Ответы

Ответ 1

Примечание:

Рекомендация состоит в том, чтобы прекратить полагаться на этот метод и рассмотреть возможность использования специального средства префикса (например, Autoprefixer, - без префикса и т.д.). Префиксы поставщиков жесткого кодирования с помощью препроцессорных микширов CSS (Less, SCSS или что-то еще) являются чистым анти-шаблоном в наши дни и считаются вредоносными. Инструменты автоматического префикса сделают ваш код чистым, читаемым, надежным и легко поддерживаемым/настраиваемым.

См. например: less-plugin-autoprefix

Оригинальный ответ:

Ну, в настоящее время LESS не поддерживает "интерполяцию имен свойств", поэтому вы не можете использовать переменную в именах свойств. Однако есть взлома: Как передать имя свойства в качестве аргумента для mixin в меньшей степени Поэтому, если вы не возражаете против свойств "dummy" в выходном CSS, здесь мы идем:

.property_(@property, @value) {
    _: ~"; @{property}:" @value;
}

.vendor(@property, @value) {
    .property_('[email protected]{property}', @value);
    .property_( '[email protected]{property}', @value);
    .property_(   '[email protected]{property}', @value);
    .property_(          @property,   @value);
}

#usage {
    .vendor(border-radius, 3px);
    .vendor(box-shadow, 10px 10px);
}

Вывод:

#usage {
  _: ; -webkit-border-radius: 3px;
  _: ; -khtml-border-radius: 3px;
  _: ; -moz-border-radius: 3px;
  _: ; border-radius: 3px;
  _: ; -webkit-box-shadow: 10px 10px;
  _: ; -khtml-box-shadow: 10px 10px;
  _: ; -moz-box-shadow: 10px 10px;
  _: ; box-shadow: 10px 10px;
}

Обновление:

Меньше v1.6.0 представила свойство Interpolation, так что теперь вам больше не нужны хаки:

.vendor(@property, @value) {
    [email protected]{property}: @value;
     [email protected]{property}: @value;
       [email protected]{property}: @value;
            @{property}: @value;
}

#usage {
    .vendor(border-radius, 3px);
    .vendor(box-shadow, 10px 10px);
}