.less 变量插值的正确语法是什么？

Question

我有一个 .less 样式表，其结构如下：

@width:600;

.some-style
{
    width:@{width}px;
}

这会产生以下错误：

Expected '}' on line x in file '..\styles.less'

我需要这些大括号，因为我需要将该变量与以下 px 后缀区分开来（@widthpx 不起作用，因为它会查找名为 widthpx 的变量）。而且我不能使用空格，因为600 px 不是有效的css。使用括号代替花括号也不起作用。

我在这里做错了什么？

更新：我从包管理器安装了最新版本的 .less，现在它工作得更好了，但有一个致命缺陷：

   width:@(width)px;  <--note the parentheses

现在可以编译，但会发出这个 CSS：

  600 px  <--note the space, which is invalid CSS, thus useless.

已解决：ScottS 向我指出了解决方案。除了他的两种方法之外，编译器似乎可以对字符串进行数学运算。所以这行得通：

@width:600px;

.some-style
{
    width:@width / 2;  <--correctly emits "300px"
}

Answer 1

使用unit函数还有更好的方法：

@width: 600;

.some-style
{
    width: unit(@width, px);
}

如果你经常这样做，那么你可以定义mixin：

.widthInPx(@w)
{
    width: unit(@w, px);
}

.some-style
{
    .widthInPx(@width);
}

Answer 2

因此，如果我理解正确，您想给 width 一个值但没有任何单位，并在调用时分配单位。我不确定为什么你会想要这样做，但有两种方法可行：

ONE：将width 设为字符串，然后进行字符串插值：

@width: '600';

.some-style
{
    width: ~'@{width}px';
}

二：乘以1px：

@width: 600;

.some-style
{
    width: @width * 1px;
}

对于“无单位”数字的情况以及以后如何添加单位（因为问题最初似乎是这样），我将上述答案保留在适当的位置。但是，根据您的评论，让我解释为什么@width: 600px 有效。 LESS 不会将其视为 string （正如您提到的那样）。相反，它将其视为带有单位的数字。 To LESS 600px 不是字符串（除非用引号括起来），而是以pixels 为单位的数字600。这就是为什么它可以很好地对其进行操作，而您不必担心它。无论这些单位是 em 或 % 还是任何其他有效的 CSS 单位，它都可以这样做。