不使用空格将值在Less（CSS）中连接起来

Question

所以我正在尝试创建一个LESS mixin，它接受一个数字（要旋转的度数），并输出正确的CSS来旋转元素。问题是，我找不到一种方法来同时编写“270deg”和“3”（270/90）以适用于IE浏览器。这里是我尝试过的方法：

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

目前我只修改了编译器脚本，这样就不会在变量/关键字连接之间加入空格。但我希望有更好的解决方案。

- B T

---

为什么不这样调用：.rotate(270deg)？是因为IE的问题吗？ - cloudhead

是的，这是因为IE的问题。 - B T

出于兴趣，LESS 的真正优势是什么？在代码长度上似乎并没有太大的区别。一些函数似乎是多余的，因为我所处理的大多数样式都不是动态的。我可以看到在一个地方更改颜色值会很好，但查找和替换可以完成这个偶尔需要编辑的工作，而不会增加任何（看起来不必要的）JavaScript 负载。 - addedlovely

如果您使用CSS进行除最基本样式之外的任何操作，您很快就会发现它几乎没有利用代码/样式对称性，并迫使您构建难以维护的样式 - 特别是如果您有依赖于彼此的样式（比如说您想要一个元素的颜色比另一个元素略暗，或者您需要相关的字体大小、定位等）。如果像我上面写的.rotate那样的参数化mixin并没有引起您的兴趣，也许您正在处理的东西非常简单，您不需要担心可维护性。 - B T

哦，另外我正在使用less.php - 所以根本没有JavaScript加载。Less被翻译成CSS，缓存，并按需发送到浏览器作为普通的CSS。此外，使用less.php中的@imports在less中全部转换为单个CSS文件 - 因此您不需要在浏览器中请求每个链接导入。这减少了负载和延迟。 - B T

不要使用连接操作，改用数学计算：-webkit-transform(@rotation * 1deg)。在我的项目中，我花费了大约30分钟来尝试将@num与％连接起来，然后恍然大悟。只需将@num * 1%相乘即可！ - chharvey

Answer 1

一种解决方案，虽然有点丑陋，但可以使用转义字符串：

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

请注意，您需要使用 less.js v1.1.x 才能进行此操作。

- cloudhead

---

哦，但是less.php不支持转义值，所以我现在会坚持我的解决方案。我猜..旁边的问题：为什么像@degrees+deg这样的连接符之间会有一个空格？我认为最好说@x：X; @x+something将输出Xsomething，然后@x+ something将输出X something。那么你就不会有这个奇怪的限制了。 - B T

当x和y不是包含数字的变量或字面数字时，x + y实际上在语言中是未定义的。deg本身被视为一个符号，例如normal、bold等，它们总是独立存在的。因此，在这种情况下，a + deg与a deg是相同的。语言中的+被简单地忽略了。 - cloudhead

Answer 2

更清晰的做法是使用unit函数（官方文档）：

unit(@rotation, deg)

在您的示例中变为：

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

文档:

unit(dimension, unit)

• dimension: 一个带或不带维度的数字
• unit（可选）：要更改为的单位，如果省略，则会删除单位

- sqren

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

- Ti Hausmann

Answer 4

对于任何发现这个关于没有空格的连接的旧项目的人来说，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 转义值的情况下，这是仅有的可行方案。

---

更新：感谢 seven-phases-max，正确的解决方案要简单得多。

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

我把这个留在这里，以防JavaScript选项成为未来发现者的有用线索。

- millebi