css - Less:在开发模式下忽略规则

Question

有没有办法在开发模式下 less 忽略 css 规则，但在 less 编译后显示该规则。

例如在文件 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;
} .-;

相反。