less - .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

所以如果我理解正确的话，你想给 width一个值但没有任何单位，并在调用时分配单位。我不确定 为什么你会想要这样做，但有两种方法可以工作:

一 : 制作 width一个字符串，然后进行字符串插值:

@width: '600';

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

二 : 乘以 1px :

@width: 600;

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

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