18

我有两个 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);

我怎样才能完成这样的 CSS 由 LESS 生成，即transform正确组合的多个条目？

4

4 回答 4

9

从 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);
}
于 2014-11-04T13:40:47.673 回答
8

将您的转换作为单个 mixin 的参数提供：

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

我想，你也可以在警卫的帮助下将你单独的 mixin 连接成一个，但我不完全确定；）

我认为您无法以另一种方式实现这一目标，因为解析器之后必须修改代码，而这应该是不可能的。

于 2012-03-10T12:00:27.810 回答
3

我认为有一个简单的方法，为 eleemnt 创建一个 div 容器，并将第一个转换应用于容器，将第二个转换为元素本身

于 2012-12-11T12:37:53.837 回答
1

我在让@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);
}
于 2014-04-09T19:37:27.703 回答