css - 连接字符串和 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 上是这样的：在 less 1.3.1 之前，支持 (~"@{name}") 类型的选择器。对此的支持将在不久的将来删除。

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

Answer 3

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

Answer 4

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

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

输出：

width: calc(33% - 12px);

Answer 5

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

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

%("string", value) 函数只是格式化一个字符串，因此它在字符串中获取 %d 并将其转换为任何值。这里有一个例子：http: //cdpn.io/hAbwl

希望这能有所帮助。

Answer 6

Less 会用空格替换除值之外的任何内容，因此要转换单位，请添加该单位的 0。只是不要传入单位值。

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

p {
 .my_mixin(12);
}

希望这对其他人有帮助。