我正在使用LESS使用Bootstrap 2.0.3。我希望广泛地定制它,但我希望尽可能避免对源代码进行更改,因为对库的更改非常频繁。我是LESS的新手,所以我不知道它的编译完全是如何工作的。使用LESS或基于LESS的框架的一些最佳实践是什么?
当前回答
我得到了和乔尔一样的解决方案:
自定义较少文件
就像上面描述的:我为所有我正在定制的Less文件创建本地副本:例如:"variables-custom. "”、“alerts-custom少。”、“buttons-custom.less”少。所以我可以使用一些标准,并有我自己的补充。缺点是:当Bootstrap更新时,它真的很难迁移。
但还有一件事:
覆盖方式
在寻找工作流程时,我经常看到有人建议简单地重写样式。因此,您首先导入标准的Less文件,然后在底部添加自定义声明。这样做的好处是:更容易更新到新版本。缺点是:编译后的CSS文件包含所有重写。一些CSS选择器定义了两次。因此浏览器需要做一些改进来找出实际应用的内容。这不太干净。
我想知道为什么预处理器不够聪明来解决这样的双重声明?我在这里还缺少什么更好的工作流程吗?
其他回答
我得到了和乔尔一样的解决方案:
自定义较少文件
就像上面描述的:我为所有我正在定制的Less文件创建本地副本:例如:"variables-custom. "”、“alerts-custom少。”、“buttons-custom.less”少。所以我可以使用一些标准,并有我自己的补充。缺点是:当Bootstrap更新时,它真的很难迁移。
但还有一件事:
覆盖方式
在寻找工作流程时,我经常看到有人建议简单地重写样式。因此,您首先导入标准的Less文件,然后在底部添加自定义声明。这样做的好处是:更容易更新到新版本。缺点是:编译后的CSS文件包含所有重写。一些CSS选择器定义了两次。因此浏览器需要做一些改进来找出实际应用的内容。这不太干净。
我想知道为什么预处理器不够聪明来解决这样的双重声明?我在这里还缺少什么更好的工作流程吗?
一个更好的方法是借鉴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。更少的文件,只要你觉得合适。
这是有意义的,因为您可以升级Bootstrap而不影响您自己的文件。事实上,Makefile还包含获取Bootstrap最新版本的命令。更多信息请参见项目页面上的README。
作为奖励,README还建议您安装watchr gem,它将在.less文件更改时自动构建项目。
在我这边,我只有一个名为theme的文件。少了一个进口的bootstrap。在下面我重写了我不想更新的变量值(即使使用less看起来不好,但是,它更容易维护)。
这对于在variables.less中自定义变量值非常有效
之后,我编译我的主题。更少的文件,而不是bootstrap.less
示例theme.less:
@import "path/to/my/bootstrap.less";
@linkColor: #MyAwesomeColor;
如果(仅当)你有时间,你就能像我一样做这件事。我保留了我自己修改过的框架版本,每当框架更新时,我都会阅读文档并检查源代码是否有修改。
乍一看,这个解决方案可能听起来不那么理想,但我有理由这么做。我使用的不是单一的框架,而是许多框架、最佳实践、重置/规范化样式表等的混合体,我总是确信没有更新会以我没有看到的任何方式改变现有的项目。
出于以下原因,我正在使用自己的自定义框架。
我去掉了所有我不需要的东西保持模块化和小 我使用我的框架来处理客户的工作,我想a)知道我到底在做什么,b)拥有我卖给客户的所有东西。我不是简单地复制和使用框架,而是尝试理解和重新创建框架 我将我的框架与CMS结合使用,不能简单地将框架丢弃并忘记到项目中/从头开始
这也是我一直在挣扎的事情。一方面,我想高度定制变量。更少的文件与我自己的颜色和设置。另一方面,我想稍微改变一下Bootstrap文件,以简化升级过程。
我的解决方案(目前)是创建一个插件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";
...
这样,如果我想重置引导颜色,字体或添加额外的mixins,我可以。我的代码是单独的,但将在Bootstrap导入的其余部分中编译。这并不完美,但这是一种权宜之计,对我来说效果很好。