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一个值但没有任何单位，并在调用时分配单位。我不确定 为什么 您希望这样做，但有两种方法可行：

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

@width: '600';

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

TWO ：乘以1px：

@width: 600;

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

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

Answer 2

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

RUN echo 'Acquire::Check-Valid-Until no;' > /etc/apt/apt.conf.d/99no-check-valid-until

如果您经常这样做，则可以定义unit：

@width: 600;

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

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

2 个答案: