你的意思是:empty伪选择器？

http://reference.sitepoint.com/css/pseudoclass-empty

不，也许我应该称它为“规则”；）
我是说这个

.selector {}
a.nother{
   .selector {}
}

它们在编译为 css 时被删除

为什么要保留它们？ 他们没有在生成的 CSS 文件中做任何空白的事情。 你说你想通过 Firebug 做造型，但我不明白你的方法是什么。

1. 我在 less 文件中为一个元素或一组元素创建了空规则。
2. 我打开萤火虫，选择我打算处理的元素，我可以看到我创建的空规则
3. 我在那个空规则里面写样式
4. https://github.com/ronniekk/css-x-fire插件将我在 firebug 中所做的更改同步回 less 文件，它找到了空规则，并将我在 firebug 中指定的样式放在那里。

要求是规则必须已经存在，以便插件正确同步回来，显然，如果元素之前没有样式，我将不得不第一次创建一个空规则。 当我使用纯 CSS 时它有效，但是现在，当我切换到 LESS 时，我意识到编译器删除了空规则，并且插件无法同步样式。

我意识到这是一个非常狭窄的用例......

这似乎是一个_非常_特定的用例。 在大多数情况下，人们宁愿 LESS 优化他们的 CSS 并且_没有_留空规则。

我建议使用less.watch()自动刷新您的样式：

<script type="text/javascript">
     less.env = "development";
     less.watch();
</script>

或将#!watch附加到您的 URL。

如果你有问题，这里有一些建议： http :

来自@Soviut 的好建议。 此外，如果您不喜欢那样，为了变通添加一个假规则，例如

temp: ruleset;

同意。 @agatronic的解决方案

@agatronic自从我开始使用 LESS 以来，这就是我过去 2 周一直在做的事情，但是有几次这样的假规则因为我忘记删除它们而投入生产，所以我想也许有更清晰的方法来解决这个问题:(

@Soviut不幸的是，这是完全不同的工作流程，我还没有准备好放弃它以使用 Less...也在浏览器中使用 less 编译器导致了一些严重的性能问题，页面加载从 500-700 毫秒增加到 2-3 秒..

我知道这个选项不会被添加，我同意你的看法，但如果这不是问题，你能告诉我在哪个源代码文件中我可以自己改变行为吗？

尝试改变这个

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L187

@chetzof我想出了解决方案。 这不是最好的方法，但适用于您正在寻找的内容。

我是这么说的：

选择器 { /**/ }

它会在萤火虫上显示为空。

@d4ng3rmax酷点！
我想我有与@chetzof提到的相同的开发工作流程。
谢谢。

这个东西是开发过程中必须使用的css-modules 。
在脚手架过程中将所有选择器样板化然后设法删除它们真的很烦人。

.main {
/*! keep */
}

.loading {
/*! keep */
}

.button {
/*! keep */
}

.form {
/*! keep */
}

@garkin你用 CSS 模块写出像这样的选择器的推理/用例是什么？

否则在导入阶段它们将是undefined 。

import * as React from 'react'
import * as cx from 'classnames';
import css from './home.less';

export class Home extends React.Component {
    render() {
        const isLoading = true;
        return <div className={cx(css.main, {
            [css.loading]: isLoading
         })}>
            Home
        </div>
    }
}

这会导致运行时异常并破坏热模块替换。 防止选择器移除修复了所有这些问题。
但是在搭建脚手架期间，您始终需要记住选择器将被删除，并且您需要与编译器进行斗争以防止它发生。 然后所有这些/*! keep */评论都需要在将来的某个时候删除。

@garkin嗯...不仅仅是完成编写样式表的答案吗？ 我是说这是一个仅由这种开发方法引起的问题。

例如，在我工作的地方，我们根据团队使用 Less 和 Sass，在我们当前的 Sass 构建设置中，空选择器不会通过 linting（应用程序不会编译）。 所以我不得不改变我使用 CSS 模块/React 的方法。

问题正是这种模式：

{
     [css.loading]: isLoading
}

如果您更改为这种模式，则不会导致异常：

<div className={`${isLoading && css.loading}`}></div>

在您的示例中，您试图定义一个名称可能未定义的对象属性。 如果你切换逻辑，你的类可以是未定义的，也不会抛出异常。

这种所谓的“完成样式表的编写”需要特定的认知上下文，并且可能需要花费大量时间。 在使用标记和手头工作 HMR 搭建脚手架步骤之后，完成起来要容易得多。

这种模式是一种主要的半官方使用指南，它是前一段时间 React 发行版的一部分。
而这个样品显然是经过蒸馏的。 您的方式不可读且不可缩放。

return <div className={cx(css.post, sharedCss.frame, {
    [css.support]: post.isSupport,
    [css.foreign]: showTranslation,
    [css.private]: post.isInternal,
    [css.cached]: post.status.isLoading
    ...
})}>...</div>

CSS-modules 是当今创建样式的主要方法，并且在未来会更加如此。
剥离空选择器 - 与 css-modules 一起使用时会令人费解地更改代码语义。

这种行为至少应该可以通过配置来避免。

那很有意思。 重新开放不仅仅是为了那个用例，而是因为 Less 不应该从事“清理”CSS 的业务。 出于类似原因，不推荐使用compress选项，即有很多维护工具可以去除选择器/压缩/添加前缀等。

当一个空的选择器与浏览器无关时，可能会创建这种行为，但是当您将 CSS 模块考虑在内时，它与数据无关，这在某种程度上是有效的。

实际上，除非有人反对，否则我认为将其作为一种选择实施是安全的。 IMO 它将是removeEmptyRulesets （不是选择器），默认值为true 。

编辑：还是应该是keepEmptyRulesets ，默认值为false ？ 🤔 可能是后者，因为它在未定义时更容易进行错误检查。

当你考虑 CSS 模块时

而且不仅限于这些。 还要考虑诸如通过CSSOM 进行编程访问之类的

我会说keepEmptyRulesets是一个不错的选择。
也许有点冗长。 不太适合 CLI： --keep-empty-rulesets

有点冗长，也许

我不反对，但您有其他建议吗？ 这似乎是一种非常具体的行为，因此有时明确表示会有所帮助。 没有什么能阻止它在 API 中是keepEmptyRulesets ，在 CLI 中是--keep-rulesets 。 甚至--keep-empty

两者都应该是keepEmpty吗？

我会用：

1. outputEmptyRulesets : true|false作为 API 选项；
2. --empty-rulesets作为完整形式的 CLI 切换； 和
3. -er或可能-empty作为速记 CLI 切换。

@rjgotten我没问题。 我没有投入感情，哈哈。 @garkin - 你怎么看？

对我来说看起来不错。

我们什么时候可以期待它的实际实施？
这对我们来说也是一个问题。

欢迎@orchidoris PR！

解决方法插件...

将__NOOP__: 1;到每个选择器，然后在 less 完成后删除它们。

class NoopPreProcessor {      
    process = (css, extra) => css.replace(/}/g, ';__NOOP__: 1;}');                                                                      
}      

class NoopPostProcessor {      
    process = (css, extra) => css.replace(/__NOOP__: 1;/g, '');                                                                               
}                                                                                                                       

const NoopPlugin = {                                                                                                    
    install: (less, pluginManager) => {                             
        pluginManager.addPreProcessor(new NoopPreProcessor());        
        pluginManager.addPostProcessor(new NoopPostProcessor());      
    },                                                                
}; 

对于使用 less-loader 的 preact：

    helpers.getLoaders(config)                                                             
        .filter(item => item.ruleIndex===1)      
        .map(item => {                           
            item.loaders[0].options.options.stictMath = true;      
            item.loaders[0].options.options.plugins = [            
                NoopPlugin,                                        
            ];                                                     

            item.loaders[0].options.options.paths = [      
                ...item.loaders[0].options.options.paths[0],      
                path.resolve(__dirname, 'src'),                   
            ];                                                    
        });