-

Question

在开发模式下是否有一种方法可以忽略css规则，但之后会显示较少的规则已编译。

例如在文件foo.less

中

.foo {
  background: green; //ignore this file in development mode
}

但相应的css文件将使用此规则

Answer 1

由于您无论如何都要使用不同的环境进行生产和开发，因此只使用另一个较少的文件包装较少的代码就可以更容易地为“调试”模式包装，例如：

// ---------
// main.less - this is your main less built with grunt

// ...
// all your code here
// ...

@debug: false;

.foo {
    & when not(@debug) {background: green} // ignore this file in development mode
}

// ----------
// debug.less - this is the "development" wrapper to use with less.js in a browser

@import "main.less"
@debug: true;

-

& when快捷方式需要LESS 1.5.1，对于早期版本使用：

.-() when not(@debug) {
    background: green;
} .-;

代替。

Answer 2

我最后只是在less文件中添加一个变量，然后在dev模式下用less.js覆盖该变量：

less.modifyVars({ foo: "auto" })

然后在less文件中：

@foo: green
.foo {
   background: @foo
}

减：在开发模式下忽略规则

2 个答案:

-