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

- Joshua Frank

Answer 1

如果我理解正确，您希望为width赋一个没有任何单位的值，并在调用时分配单位。我不确定为什么您想这样做，但有两种方法可以实现：

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

@width: '600';

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

TWO: 乘以 1px:

@width: 600;

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

我已经保留了以上的答案，以便说明如何在后期添加单位（因为问题最初似乎是这样的）。然而，根据你的评论，让我解释一下为什么@width: 600px起作用。LESS不将其视为字符串（正如你所说），而是将其视为带有单位的数字。对于LESS来说，600px不是字符的字符串（除非它被包裹在引号中），而是以像素为单位的数字600。这就是为什么它可以轻松地进行操作，而无需担心它。无论这些单位是em、%还是任何其他有效的CSS单位。

- ScottS

---

原因是我想要对单位进行数学计算。例如，我想要执行width: @{width / 2}px。但是我刚刚检查了一下，编译器似乎确实理解这个。如果我将原始定义更改为@width:600px，然后将样式设置为width:@width / 2，编译器会正确地输出300px。对我来说，用字符串600px进行计算而不是数字600是违反直觉的，但它解决了我的问题。您能否更新您的答案（或添加一个新的答案），并且我会接受它？上面的解决方案确实没有解决问题。 - Joshua Frank

@JoshuaFrank：也许在你发表评论之前我已经击败了你。显然，我误解了你不在@width上最初放置单位的原因。我将更新答案以帮助解释为什么这并不像你认为的那样“违反直觉”。 - ScottS

Answer 2

还有一种更好的方法，可以使用unit函数：

@width: 600;

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

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

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

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

- mixel