Объединение нескольких записей "преобразование" в Less

У меня есть два mixins, которые оба конвертируются в -webkit-transform:

.rotate(@deg) {
  -webkit-transform: rotate(@deg);
}

.scale(@factor) {
  -webkit-transform: scale(@factor);
}

Когда я использую их вместе:

div {
  .rotate(15deg);
  .scale(2);
}

... они (как и ожидалось) отображаются как:

div {
  -webkit-transform: rotate(15deg);
  -webkit-transform: scale(2);
}

Это не похоже на действительный CSS, поскольку второй имеет приоритет над первым; первый отбрасывается. Чтобы объединить записи transform, это должно быть:

-webkit-transform: rotate(15deg) scale(2);

Как я могу выполнить такой CSS, который будет сгенерирован LESS, т.е. несколько записей transform, которые объединены правильно?

Ответ 1

Предоставьте свои преобразования в качестве аргументов для одного mixin:

.transform(@scale,@rotate) {
  -webkit-transform: @arguments;
}

Я думаю, вы также можете достичь, чтобы объединить ваши отдельные микшины в один с помощью охранников, но я не совсем уверен;)

Я думаю, что вы не можете достичь этого по-другому, так как парсеру придется впоследствии модифицировать код, который невозможен.

Ответ 2

Начиная с Less v1.7.0, слияние значений свойств с разделителем пространства возможно, и нет необходимости встраивать два микшина в один.

Ниже меньше кода

.rotate(@deg) {
  -webkit-transform+_: rotate(@deg);
}

.scale(@factor) {
  -webkit-transform+_: scale(@factor);
}

div{
    .rotate(45deg);
    .scale(1.5);
}

будет скомпилирован в следующий CSS:

div {
  -webkit-transform: rotate(45deg) scale(1.5);
}

Ответ 3

Я думаю, что есть простой способ, создайте контейнер div для элемента и примените первое преобразование к cntainer, оставив второй для самого элемента

Ответ 4

У меня были проблемы с получением @arguments для работы. Я использовал @переменную отдыха, которая сделала трюк

МЕНЬЕ:

.transform(@rest...) {
   transform: @rest;
   -ms-transform: @rest;
   -webkit-transform: @rest;
}

.someClass{
   .transform(translate3D(0,0,0),scale(1,1));
}

.otherClass{
   .transform(translate3D(0,0,0),rotate(1,1));
}

.anotherClass{
   .transform(rotate(1,1));
}

Вывод CSS:

.someClass {
  transform: translate3D(0, 0, 0) scale(1, 1);
  -ms-transform: translate3D(0, 0, 0) scale(1, 1);
  -webkit-transform: translate3D(0, 0, 0) scale(1, 1);
}
.otherClass {
  transform: translate3D(0, 0, 0) rotate(1, 1);
  -ms-transform: translate3D(0, 0, 0) rotate(1, 1);
  -webkit-transform: translate3D(0, 0, 0) rotate(1, 1);
}
.anotherClass {
  transform: rotate(1, 1);
  -ms-transform: rotate(1, 1);
  -webkit-transform: rotate(1, 1);
}