在 Less 中组合多个“转换”条目答案

【问题标题】：Combining multiple "transform" entries in Less在 Less 中组合多个“转换”条目
【发布时间】：2012-03-09 15:21:11
【问题描述】：

我有两个 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条目？

【问题讨论】：

你能提供一个fiddle吗？
@Alp：我不确定如何将 LESS 代码放在那里。看起来只有 CSS 和 SCSS 可用。将<link> 放置到外部.less 文件会导致跨域错误。
我知道有点晚了，但是跨域错误的原因是您的服务器没有发回正确的 CORS 标头。在这种情况下，JSFiddle 不必做任何事情，除非您希望它发送身份验证，您必须与 JSFiddle 协调才能做到这一点，而且可能不值得这样做。
@TylerH - 我将恢复您的编辑。 Less 已经被指定为 Q 的标签，所以它不应该出现在标题中（还要注意正式名称是 Less 而不是 LESS）。
@seven-phases-max 编辑是为了明确该主题的搜索，该问题对非 Less 应用程序没有用处。否则我会同意 Less 不应该出现在标题中。

标签： css combinations less css-transforms

【解决方案1】：

从 Less v1.7.0 开始，merging property values 可以使用空格分隔符，无需将两个 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);
}

【讨论】：

Sass (SCSS) 中有类似的东西吗？

【解决方案2】：

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

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

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

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

【讨论】：

谢谢，这行得通，虽然我对它并不完全热情。但如果没有其他选择，它会这样做。
我提交了一个请求here，但没有太大进展。
hm，ninique 所说的和我提出的基本相同。我认为他们不会实现这样的功能，因为它与 css 压倒一切的范式相矛盾，并且会带来很多麻烦......
是的，在我看来，CSS 不定义rotation: 25deg; scale: 2; 或类似的东西实际上是一个错误。

【解决方案3】：

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

【讨论】：

【解决方案4】：

我在让@arguments 工作时遇到问题。我使用了@rest variable，它成功了

少例子：

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

【讨论】：