在Less中组合多个"transform"条目

Question

我有两个mixin都转换为-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);

如何通过LESS生成这样的CSS,即多个transform正确组合的条目？

Answer 1

从Less v1.7.0开始,可以将属性值与空格分隔符合并,并且不需要将两个mixin合二为一.

以下Less代码

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

Answer 2

提供转换作为单个mixin的参数:

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

我想,你也可以在守卫的帮助下将你的单独mixin连接成一个,但我不完全确定;)

我认为你无法以另一种方式实现这一点,因为解析器必须在之后修改代码,这是不可能的.