Question

我正在使用LESS使用Bootstrap 2.0.3。我想广泛地对它进行自定义，但我希望尽可能避免对源进行更改，因为库的更改经常发生。我是LESS的新手，所以我不知道它的编译是如何完全有效的。使用基于LESS或LESS的框架有哪些最佳实践？

Answer 1

我的解决方案与jstam类似，但我尽量避免对源文件进行更改。鉴于对bootstrap的更改将经常发生，我希望能够通过将我的修改保存在单独的文件中来下载最新的源并进行最小的更改。当然，它并不完全是防弹。

将bootstrap.less和variables.less复制到父目录。将bootstrap.less重命名为theme.less或任何你想要的。您的目录目录结构应如下所示：
```
/Website            
     theme.less
     variables.less
     /Bootstrap
     ...
```

更新theme.less中的所有引用以指向引导子目录。确保您的variables.less是从父级而不是引导程序目录引用的，如下所示：

...
// CSS Reset
@import "bootstrap/reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins.less";

// Grid system and page structure
@import "bootstrap/scaffolding.less";
@import "bootstrap/grid.less";
@import "bootstrap/layouts.less";

...

在theme.less文件中包含CSS覆盖之后立即添加CSS覆盖。

...
// Components: Nav
@import "bootstrap/navs.less";
@import "bootstrap/navbar.less";

// overrides
.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
    border-radius: 0 0 0 0;
    padding: 10px;
}

.nav-tabs, .nav-pills {
    text-transform: uppercase;
}

.navbar .nav > li > a {
    text-shadow: none;
}

...

在HTML网页中链接到theme.less而不是bootstrap.less。

每当新版本发布时，您的更改都应该是安全的。每当新版本发布时，您还应该在自定义引导程序文件之间进行区分。变量和进口可能会发生变化。

Answer 2

这也是我一直在努力的事情。一方面，我想用我自己的颜色和设置高度自定义variables.less文件。另一方面，我想尽可能地更改Bootstrap文件以简化升级过程。

我的解决方案（目前）是创建一个addon LESS文件，并在导入变量和mixin后将其插入bootstrap.less文件。所以像这样：

...

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

这样，如果我想重置Bootstrap颜色，字体或添加额外的mixin我可以。我的代码是独立的，但将在其余的Bootstrap导入中编译。这不是完美的，但它是一个对我有用的权宜之计。

Answer 3

在我身边，我只有一个名为theme.less的文件，其中导入boostrap.less，就在下面我覆盖（即使使用LESS似乎很糟糕，但是，它是更容易维护）变量值我不想更新。

这适用于variables.less

中变量的自定义值

之后我编译theme.less文件而不是bootstrap.less

示例theme.less：

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;

Answer 4

更好的（恕我直言）方法是从名为Bootswatch的swatchmaker github项目中获取提示。该项目专门用于在网站上构建和管理数十个Bootstrap主题。

项目中的Makefile构建swatchmaker.less（您可以将其重命名为customizations.less）。该文件包含一堆导入：

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

您可以将swatch文件夹和bootswatch.less文件重命名为您认为合适的文件。

这是有道理的，因为您可以在不影响自己文件的情况下升级Bootstrap。实际上，Makefile还包含获取最新版Bootstrap的命令。有关更多信息，请参阅项目页面上的自述文件。

作为奖励，README还建议您安装watchr gem，它将在.less文件更改时自动构建项目。

Answer 5

如果（并且只有）你有时间可以像我一样做。我保留了自己的框架修改版本，随着框架的每次更新，我都会阅读文档并检查修改源。

这个解决方案在初看起来可能听起来不太理想，但我有理由这样做。我不使用其中一个，而是使用许多框架，最佳实践，重置/规范化样式表等等。我总是确信任何更新都不会以任何我看不到的方式更改现有项目。

由于以下原因，我正在使用自己的自定义框架。

我剥离了一点点我不需要保持模块化和小的东西
我将我的框架用于客户工作，并希望a）知道我正在使用什么，同时b）拥有我卖给客户的所有东西。我不是简单地复制和使用框架，而是尝试理解并重新创建它们
我将我的框架与CMS结合使用，不能简单地将框架放入项目/从头开始

Answer 6

我和Joel达成了同样的解决方案：

自定义较少文件

如上所述：我为自定义的所有Less文件创建本地副本：例如：“variables-custom.less”，“alerts-custom.less”，“buttons-custom.less”。所以我可以使用一些标准，并有我自己的补充。缺点是：当Bootstrap更新时，它很难迁移。

但还有别的东西：

覆盖样式

在寻找工作流程时，我经常会看到人们建议简单地覆盖样式。因此，首先导入标准的Less文件，然后在底部添加自定义声明。这里的好处是：更新到更新版本更容易。缺点是：编译的CSS文件包含所有覆盖。一些CSS选择器定义了两次。因此浏览器需要进行一些提升以找出实际应用的内容。那不是很干净。

我想知道为什么预处理器不够聪明来解决这样的双重声明？我在这里缺少更好的工作流程吗？

Answer 7

只需将@import "../../styles.less";（或样式表所在的位置）添加到底部的bootstrap.less。这允许您在自己的style.less中使用像.gradient或.border-radius这样的Bootstrap mixins。

Twitter Bootstrap定制最佳实践

7 个答案: