Bootstrap 定制：为什么要使用 LESS？答案

【问题标题】：Bootstrap Customization: Why should I use LESS?Bootstrap 定制：为什么要使用 LESS？
【发布时间】：2013-05-03 22:40:17
【问题描述】：

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

但是，与简单的 CSS 覆盖相比，我还没有确定使用 LESS 的具体优势（性能和其他方面）。似乎最终LESS被编译为CSS。随着新版本 Bootstrap 的引入，LESS 似乎只会引入更多维护/重新编译任务。

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

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

然后标记看起来像：

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

如果这不是自定义的最佳实践，LESS 如何改进它？

【问题讨论】：

澄清一下：您是在询问 benefits of LESS in general，还是在您的特定配置中使用 LESS？
我认为两者都有一点，但更多的是关于使用 LESS 专门用于 Bootstrap.css 自定义。

标签： css twitter-bootstrap less bootply

【解决方案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 文件中的某个地方，看起来像上面乱七八糟的东西会自动更新。

【讨论】：

谢谢，有没有办法使用 LESS 并将覆盖编译到单独的“theme.css”文件中——或者只能通过自定义构建“bootstrap.css”来完成？
您必须选择使用 Bootstrap 作为纯 CSS 或 Bootstrap 与 LESS。您会在插入值的 LESS 文件中找到 .border-radius(@baseBorderRadius); 之类的内容。请查看 navbar.less 以了解我的意思。所以不，你不能在使用 Bootstrap 时编译成单独的文件。
好的.. 我需要考虑进一步实施 LESS。您的回答有助于澄清。