286

我正在使用 LESS 使用 Bootstrap 2.0.3。我想对它进行广泛的定制，但我想尽可能避免对源代码进行更改，因为对库的更改很频繁。我是 LESS 的新手，所以我不知道它的编译是如何工作的。使用 LESS 或基于 LESS 的框架有哪些最佳实践？

4

7 回答 7

181

我的解决方案与 jstam 的类似，但我尽可能避免更改源文件。鉴于对引导程序的更改会很频繁，我希望能够通过将我的修改保存在单独的文件中来获取最新的源代码并进行最小的更改。当然，它并不完全是防弹的。

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

    /Website            
     theme.less
     variables.less
     /Bootstrap
     ...

  2. 更新 theme.less 中的所有引用以指向 bootstrap 子目录。确保您的 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";

    ...

  3. 将 CSS 覆盖添加到 theme.less 文件中后，立即添加它们。

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

...

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

每当新版本出现时，您的更改应该是安全的。每当新版本出现时，您还应该在自定义引导文件之间进行比较。变量和导入可能会改变。

于 2012-05-08T19:37:26.737 回答
36

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

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

...

// 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 导入中编译。这并不完美，但它是一个对我来说效果很好的权宜之计。

于 2012-05-07T16:29:12.170 回答
25

从我的角度来看，我只有一个名为的文件，theme.less其中包含一个 import boostrap.less.

这适用于为变量自定义值variables.less

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

示例theme.less：

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;
于 2012-10-19T12:14:32.727 回答
5

一种更好（恕我直言）的方法是从Bootswatch github 项目swatchmaker中获得启发。该项目专为构建和管理网站上的数十个 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。

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

于 2013-01-09T10:21:10.330 回答
4

我得出了与 Joel 相同的解决方案：

自定义较少文件

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

但还有一点：

覆盖样式

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

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

于 2012-07-16T10:40:10.203 回答
4

如果（并且仅当）您有时间可以像我一样做到这一点。我保留自己修改过的框架版本，每次更新框架时，我都会阅读文档并检查源代码是否有修改。

这个解决方案乍一看可能听起来不太理想，但我有理由这样做。我不使用一个，而是使用许多框架、最佳实践、重置/规范化样式表等的混合体，并且我始终确信，任何更新都不会以我没有看到的任何方式改变现有项目。

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

  1. 我剥离了我不需要保持模块化和小型化的每一点
  2. 我将我的框架用于客户工作，并希望 a) 知道我在做什么，同时 b) 拥有我卖给客户的所有东西。我不是简单地复制和使用框架，而是尝试理解和重新创建它们
  3. 我将我的框架与 CMS 结合使用，不能简单地将框架丢弃并忘记到项目中/从头开始
于 2012-05-09T12:03:40.790 回答
2

只需将@import "../../styles.less";（或您的样式表所在的任何位置）添加到底部的 bootstrap.less 即可。这允许您在自己的 style.less 之类.gradient或内部使用 Bootstrap mixin。.border-radius

于 2013-02-04T02:00:52.843 回答