在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条目？

- pimvdb

---

你能提供一个fiddle吗？ - Alp

@Alp：我不确定在哪里放置LESS代码。看起来只有CSS和SCSS可用。将外部的.less文件放置在<link>中会出现跨域错误。 - pimvdb

我知道现在有些晚了，但是跨域错误的原因是您的服务器没有正确地发送CORS头。在这种情况下，JSFiddle无需做任何事情，除非您希望它发送身份验证，那么您需要与JSFiddle协调，并且可能不值得这样做。 - trysis

@TylerH - 我将撤销你的修改。因为Less已经作为该问题标签指定，所以它不应出现在标题中（还请注意官方名称是Less而不是LESS）。 - seven-phases-max

@seven-phases-max 此处编辑是为了让搜索该主题的人们清楚明白，此问题对于非 Less 应用程序是没有用的。否则我会同意将 Less 从标题中移除。 - TylerH

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

- Harry

---

Sass（SCSS）中是否有类似的东西？ - tonix

Answer 2

将你的转换作为参数提供给一个混合宏：

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

我猜你也可以用守卫的帮助将单独的mixin连接成一个，但我不是完全确定;)

我认为你没有其他方法可以实现这个，因为解析器之后需要修改代码，这是不可能的。

- Christoph

---

谢谢，这可以工作，虽然我不是完全热衷于它。但如果没有其他选择，它将能够胜任。 - pimvdb

我在这里提交了一个请求，但目前进展不大。 - pimvdb

嗯，Ninique所说的基本上就是我提出的。我不认为他们会实现这样的功能，因为它与CSS覆盖性质的范例相矛盾，并且会带来很多麻烦... - Christoph

在我看来，CSS 未定义 rotation: 25deg; scale: 2; 或类似的内容，实际上是一个错误。 - pimvdb

Answer 3

我认为有一种简单的方法来解决这个问题，创建一个div容器，对容器应用第一个变换，留下第二个变换给元素本身。

- user1878697

Answer 4

I was having problems getting @arguments to work. I used the @rest variable which did the trick.

LESS示例:

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

- brandon