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;
}

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

Answer 1

您应该在advanced选项开启的情况下使用https://github.com/less/less-plugin-clean-css。

之后运行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}