Объединение нескольких записей "преобразование" в 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);
}