连接字符串和var less css

Question

任何人都可以告诉我如何在LESS中连接var和一个字符串，这样我们之间没有空格吗？

我有以下代码：

.text(@size) {
    font-size: @size + px;
    line-height: (@size / 10) + em;
}

h1 {
   .text(16)
}

LESS输出如下：

h1 {
    font-size: 12 px;
    line-height: 1.2 em;
}

我需要找到一种方法来删除空格。

由于 皮特

Answer 1

如果有任何后来者发现这个帖子：

有一个内置功能：

unit(@dimension, [@unit: ""]);

因此font-size: unit(@size, px);应该会产生font-size: 12px。我测试了它。

http://lesscss.org/#reference

Answer 2

你可以使用这样的东西：

.text(@size) {
    @lineheight: @size / 10;
    font-size: ~"@{size}px";
    line-height: ~"@{lineheight}em";
}

但是在lesscss.org上是这样的：在少于1.3.1之前（〜“@ {name}”）支持选择器类型。 将在不久的将来删除对此的支持。

我认为另一种解决方法是不可能的。

Answer 3

我认为最干净的方法（没有字符串插值）是为你的变量添加0px，例如@size + 0px。

Answer 4

这就是我最近解决类似问题的方法。

.text(@size: 10) {
  font-size: e(%("%dpx", @size));
  line-height: e(%("%dem", @size/10));
}

％（“string”，value）函数只是格式化一个字符串，所以它在字符串中取％d并将其转换为任何值。 这里有一个例子：http://cdpn.io/hAbwl

希望这可以提供帮助。

Answer 5

如果你需要将它与CSS函数结合使用（例如calc），这里有一种方法：

@width: 12;
width: %(~"calc(33%% - %dpx)", @width);

输出：

width: calc(33% - 12px);

Answer 6

Less替换除了带空格的值之外的所有内容，因此要转换单位，您添加该单位的0。只是不传递单位价值。

.my_mixin(@num) {
 @result: @num / 16; //12 / 16
 font-size: @result + 0em; //0.750em
}

p {
 .my_mixin(12);
}

希望这有助于其他人。