Объединение нескольких «преобразовать» записи в Less - PullRequest
Новая
       4

Объединение нескольких «преобразовать» записи в Less

17 голосов
/ 09 марта 2012

У меня есть два миксина, которые оба конвертируются в -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 записей, которые правильно объединены?

Ответы [ 4 ]

9 голосов
/ 04 ноября 2014

Начиная с 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);
}
8 голосов
/ 10 марта 2012

Укажите ваши преобразования в качестве аргументов для одного миксина: 

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

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

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

3 голосов
/ 11 декабря 2012

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

1 голос
/ 09 апреля 2014

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

МЕНЬШИЙ пример: 

.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);
}
...