css - Bootstrap 定制 : Why should I use LESS?

Question

我正在考虑将 LESS 集成到我的 Bootstrap 编辑器 (Bootply.com) 中以符合 Bootstrap customization best practices ，以及对混合的支持。

但是，我还没有确定使用 LESS 相对于简单 CSS 覆盖的具体优势(性能和其他方面)。看来最后LESS被编译成CSS了。随着新版本的 Bootstrap 的推出，LESS 似乎只会引入更多的维护/重新编译任务。

我知道可以在“bootstrap.css”之后使用自定义“theme.css”来完成 Bootstrap 自定义。因此，如果您想更改 .navbar 颜色，我只需在“theme.css”中添加几行，例如..

.navbar-custom .navbar-inner {
   background-color:#444444;
}

然后标记看起来像:

<div class="navbar navbar-custom navbar-fixed-top">..

如果这不是定制的最佳实践，那么 LESS 如何改进它？

Answer 1

LESS 像这样抽象掉 CSS 困惑:

background: #45484d; /* Old browsers */
background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

在您的例子中，导航栏有渐变，因此您不能简单地更改背景颜色。如果你使用 LESS，你可以选择两种颜色，在 Bootstrap 的 CSS 文件中的某个地方，看起来像上面乱七八糟的东西会自动更新。