Question

我是LESS的新手。我正在使用另一个开发人员构建的代码。

在.less文件中，当我去编译时，它在这一行上抛出一个解析错误：

@media only screen 
and (min-width: @menu-break-point){


}

它似乎不喜欢那个选择器。

我已经阅读了很多有关编译错误的内容，并发现旧版本的LESS不支持这一点，这似乎是问题所在。这个页面......

LESS compile error on retina media query

...提到它需要LESS 1.3.1+，我正在使用的SimpLESS编译器似乎使用1.3.0。同样，我曾尝试使用最新版本的SimpLESS App本身，但仍然无效。

有人可以建议使用LESS 1.3.1或更高版本的本地Mac编译器吗？如果这看起来像一个愚蠢的问题，我很抱歉，但我是新手与LESS合作以及编译软件。谢谢！

Answer 1

@ menu-break-point是一个变量，它的值是什么？

我原来的答案是编译器坏了，因为无法找到变量@menu-break-point，因为你提到你是新的，你得到了之前的代码，然后我更喜欢问它上面的值

来自http://lesscss.org/#reference

CSS转义类似于〜“value”语法。它期望字符串为参数并按原样返回其内容，但不带引号。有可能用于输出CSS值，这是无效的CSS语法或使用 LESS不承认的专有语法。

我只是尝试了这三种方式，并在我的nodejs lessc 1.5.1（LESS编译器）[JavaScript]

中编译得很好

@menu-break-point: ~"640px";
@media only screen and (min-width: @menu-break-point){
  body{
    background-color:black;
  }
}
@menu-break-point: 640px;
@media only screen and (min-width: @menu-break-point){
  body{
    background-color:black;
  }
}
@menu-break-point: 640px;
@thisSelector: ~"only screen and (min-width: @{menu-break-point})";
@media @thisSelector{
  body{
    background-color:black;
  }
}

编译为

@media only screen and (min-width: 640px) {
  body {
    background-color: black;
  }
}
@media only screen and (min-width: 640px) {
  body {
    background-color: black;
  }
}
@media only screen and (min-width: 640px) {
  body {
    background-color: black;
  }
}

我认为你可以尝试第三个并看看它是否有效，如果没有，我建议你安装更少的nodejs和watchcompile，就是我用的。

对于你的评论减法问题：

@a:'640px - 1px';
@b:640px - 1px;
@c:~'640px - 1px';

div{ width:@a}
div{ width:@b}
div{ width:@c}

编译到

div {
  width: '640px - 1px';
}
div {
  width: 639px;
}
div {
  width: 640px - 1px;
}

Answer 2

这些可能都是很好的建议，伙计们，谢谢。但无论如何，我发现问题在于我的情况。就是那条线，但它就是回归。换句话说，这破坏了编译：

@media only screen 
and (min-width: @menu-break-point){


}

但事实并非如此。

@media only screen and (min-width: @menu-break-point){


}

我在尝试了Koala，SimLess，CodeKit，Crunch和其他编译器之后想到了这一点。当它到达那条线时，所有人都做同样的事情。我本来应该检查一下，但我一直认为它是@media查询。

同样，我没有写过我正在使用的.less代码，这是我第一次冒险进入.less。

较旧版本的媒体查询编译错误较少

2 个答案: