less - 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?