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

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


css less css-transforms combinations
person pimvdb    schedule 09.03.2012    source источник
comment
не могли бы вы предоставить скрипку?   -  person Alp    schedule 10.03.2012
comment
@Alp: я не знаю, как туда поместить МЕНЬШЕ код. Похоже, доступны только CSS и SCSS. Размещение <link> во внешнем файле .less приводит к междоменной ошибке.   -  person pimvdb    schedule 10.03.2012
comment
Я знаю, что уже поздно, но причина междоменной ошибки в том, что ваш сервер не отправлял обратно правильные заголовки CORS. JSFiddle не должен был ничего делать в этом случае, если только вы не хотели, чтобы он отправлял аутентификацию, что вам нужно было бы согласовать с JSFiddle, и, вероятно, этого не стоило бы делать.   -  person trysis    schedule 02.10.2015
comment
@TylerH - я собираюсь отменить ваше редактирование. Less уже указан как тег Q, поэтому он не должен появляться в заголовке (также обратите внимание, что официальное название — Less, а не LESS).   -  person seven-phases-max    schedule 28.10.2015
comment
@seven-phases-max Редактирование состоит в том, чтобы прояснить для поиска по теме, что этот вопрос бесполезен для приложений, отличных от Less. В противном случае я бы согласился, что Меньше не должно быть в названии.   -  person TylerH    schedule 28.10.2015

Ответы (4)


arrow_upward
8
arrow_downward

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

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

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

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

person Christoph    schedule 10.03.2012
comment
Спасибо, это работает, хотя я не в восторге от этого. Но сойдет, если другого выхода нет. - person pimvdb; 10.03.2012
comment
Я подал запрос здесь, но особого прогресса не было. - person pimvdb; 19.10.2012
comment
хм, то, что сказал Ниник, в основном то же самое, что я предложил. Я не думаю, что они будут реализовывать такую ​​​​функцию, потому что она противоречит парадигме первостепенной природы CSS и вызовет много проблем... - person Christoph; 19.10.2012
comment
Да, на мой взгляд, на самом деле это ошибка CSS, чтобы не определить rotation: 25deg; scale: 2; или что-то в этом роде. - person pimvdb; 20.10.2012

arrow_upward
9
arrow_downward

Начиная с 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);
}
person Harry    schedule 04.11.2014
comment
Есть ли что-то подобное в Sass (SCSS)? - person tonix; 10.05.2019

arrow_upward
3
arrow_downward

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

person user1878697    schedule 11.12.2012

arrow_upward
1
arrow_downward

У меня были проблемы с работой @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);
}
person brandon    schedule 09.04.2014