11

我有一个具有以下结构的 .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"
}
4

2 回答 2

15

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

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

@width: '600';

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

二：乘以1px：

@width: 600;

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

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

于 2012-12-20T16:31:45.410 回答
0

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

@width: 600;

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

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

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

.some-style
{
    .widthInPx(@width);
}
于 2019-06-28T11:51:54.310 回答