【发布时间】：2015-05-13 18:42:34
【问题描述】：
我们在项目中使用引导程序。我们为 bootstrap 购买了一个定制的主题，围绕它创建了一个很好的自定义样式，并添加了许多我们在项目中使用的有用样式。此主题使用 LESS。
现在，我们的每个客户都希望为他们的网站定制配色方案。通过简单地更改一些 LESS 变量，我们可以生成完全不同的外观。
例如：
@import "../../theme/style.less";
@import "../../shared.less";
// Basic Colors
@navy: #781d7e; // Primary color
@dark-gray: #c2c2c2; // Default color
@blue: #8dc63f; // Success color
@lazur: #00aedb; // Info color
@yellow: #f7941e; // Warrning color
@red: #ed1c24; // Danger color
这会生成一个包含所有样式的完整 css 文件。每个客户端都有自己的一组生成 .css 文件。我们的问题是每次我们进行更改时都需要很长时间来编译它们。
我们如何才能使用 LESS 拥有一个基本主题并仅生成在使用修改后的变量时修改值所需的类覆盖？
例如，如果 btn-primary 背景色是 @navy，那么对于新的配色方案，我只需要一个包含 .btn-primary 的类覆盖的 css 文件，将背景色更改为 @navy 的新值。这甚至可以用LESS吗？
谢谢，
【问题讨论】：
-
你用什么来编译LESS
-
现在，Visual Studio 中的 Web Essentials 会在保存时重新编译所有内容。我们的站点特定的 css 不会随主题而改变，它位于另一个文件中，不需要很多时间来重新编译。但是每次我们添加一个可能会根据主题发生变化的元素时，都需要很长时间。
-
你能不能不使用一些旨在预编译 LESS/SASS 的东西，比如 compass 和 grunt……它们超级快
-
Web Essentials 使用无节点最新版本进行编译。
-
嗯，简而言之：不，没有自动方法可以仅“提取”那些依赖于变量的类（即使是这样，它也不会有更好的时机，因为它仍然需要解析并评估所有内容以确定更改的内容和使用位置）。您可以手动执行此操作，例如对于
.btn-primary，您可以编译buttons.less只是为了获得相应的按钮样式，但这几乎不是一个解决方案，因为很快您将有太多文件需要单独编译并且需要甚至更多的时间来编译（不算它也变得不可维护）。
标签： twitter-bootstrap twitter-bootstrap-3 less