.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一个值但没有任何单位,并在调用时分配单位.我不确定你为什么要这样做,但有两种方法可行:

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

@width: '600';

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

TWO:乘以1px:

@width: 600;

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

我已经将上述答案留给了一个"无单位"数字的案例,以及如何稍后添加单元(因为问题似乎是最初的).但是,根据你的评论让我解释为什么@width: 600px有效.LESS并不认为这是一个字符串(正如你所提到的那样).相反,它将其视为具有单位的数字.To LESS 600px不是字符串(除非它用引号括起来),而是600以单位为单位的数字pixels.这就是为什么它可以很好地对它进行操作,而不必担心它.它可以这样做,无论这些单位em或%或任何其他有效的CSS单位.