28

所以我正在尝试制作一个 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)
}

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

4

4 回答 4

37

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

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

请注意，为此您需要 less.js v1.1.x。

于 2011-05-20T06:07:20.957 回答
26

更清洁的方法是使用unit（官方文档）：

unit(@rotation, deg)

在您的示例中变为：

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

文档：

单位（尺寸，单位）

  • 维度：一个数字，有或没有维度
  • 单位（可选）：要更改的单位，如果省略，它将删除该单位
于 2013-08-22T11:37:53.930 回答
3

谢谢云头。由于 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})");
}
于 2012-03-07T09:20:47.433 回答
0

对于发现这个关于没有空格的连接的旧项目的人，LESS #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 选项对未来的发现者有用。

于 2016-01-13T20:05:48.443 回答