Question

所以我试图制作一个LESS mixin，它取一个数字（旋转度）并输出正确的css来旋转元素。问题是，我无法找到一种方法来为IE写“270deg”和“3”（270/90）。以下是我尝试过的事情：

.rotate(@rotation: 0) {
    @deg: deg;
    -webkit-transform: rotate(@rotation deg); // i can see why this doesn't work
    -moz-transform: rotate((@rotation)deg); // parens
    -o-transform: rotate(@rotation+deg); // variable-keyword concatenation
    transform: rotate(@rotation+@deg); // variable-variable concatenation

    // this is the reason I need @rotation to be just a number:
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation/90);
}

.someElement {
    .rotate(270)
}

现在我刚刚修改了编译器脚本，以便它不会在变量/关键字连接之间放置空格。我希望有更好的解决方案。

Answer 1

一种解决方案，虽然有点难看，但是会使用转义字符串：

@degs: ~"@{rotation}deg"
@degs-ie: @rotation / 90;
transform: rotate(@degs);
filter: ~"DXImageBlahBlah(rotation=@{degs-ie})"

注意你需要less.js v1.1.x。

Answer 2

更简洁的方法是使用unit（official documentation）：

unit(@rotation, deg)

在您的示例中变为：

transform: rotate(unit(@transition, deg));

<强>文档

单位（维度，单位）

维度：包含或不包含维度的数字
unit（可选）：要更改的单位，或者如果省略则删除单位

Answer 3

谢谢cloudhead。由于逃避LESS PHP略有不同，这对我有用：

.rotation(@rotation:90){
  @degs: e("@{rotation}deg");
  @degs-ie: @rotation / 90;

  -webkit-transform: rotate(@degs);
  -moz-transform: rotate(@degs);
  transform: rotate(@degs);
  filter: e("progid:DXImageTransform.Microsoft.BasicImage(rotation=@{degs-ie})");
}

Answer 4

对于任何发现这个旧项目没有空格的连接的人来说，在＃1375（2013年开业，2016年1月未修订）中有一个错误/功能请求描述了问题。

问题：

@CharTinySpace: \\2009;
content: "@CharTinySpace@CharTinySpace";

输出：

content: " \2009 \2009 ";

这为显示屏增加了额外的空间。

~~解决方案可以是使用嵌入式JavaScript替换：~~

@CharTinySpace: \\2009; content: `"@{CharTinySpace}@{CharTinySpace}".replace(/ /g,"")`;

的输出：

content: "\2009\2009";

不是最好的解决方案，但是在我的实例中唯一可以使用可读变量而不是unicode转义值的解决方案。

<小时/> 更新：由于七阶段最大，正确的解决方案更简单。

@CharTinySpace: \\2009;
content: "@{CharTinySpace}@{CharTinySpace}";

我离开这里以防JavaScript选项是未来发现者的有用线索。

在没有空格的情况下以较小（css）连接值

4 个答案: