LESS 能防止重复样式吗？

Question

如果我在 LESS 中定义以下嵌套样式：

.nav-bar {
    .navbar-brand {
        background: #000;
    }
}

.nav-bar {
    .navbar-brand {
        background: #fff;
    }
}

结果是：

.nav-bar .navbar-brand {
  background: #000;
}
.nav-bar .navbar-brand {
  background: #fff;
}

我希望这些可能会被检测为重复项。所以，结果就是：

.nav-bar .navbar-brand {
  background: #fff;
}

.. 因为第一个样式将被覆盖。我知道网络浏览器会这样对待它，第二个样式属性将覆盖第一个。不过，我更关心文件大小。我希望我可以为 Bootstrap 下载 LESS，然后在自定义 LESS 文件中覆盖该特定项目的样式。编译器是否提供此功能？

Answer 1

您应该使用 https://github.com/less/less-plugin-clean-css 并打开 advanced 选项。

运行 npm install less-plugin-clean-css 之后就可以使用 lessc file.less --clean-css="advanced".

使用上面的命令：

.nav-bar {
    .navbar-brand {
        background: #000;
    }
}

.nav-bar {
    .navbar-brand {
        background: #fff;
    }
}

编译成：

.nav-bar .navbar-brand{background:#fff}

另见：How to keep duplicate properties in compiled CSS file when use LESS?

Does LESS prevent duplicate styles?