Bootstrap主题 - variables.less - Bootswatch

Question

如何从http://bootswatch.com/上的variables.less和bootstrap.less文件生成bootstrap.css文件？

使用lessC编译,我得到一个css文件,但这比bootstrap.css小.我怎么能改变其中一个主题的颜色？

万分感谢.

Answer 1

Bootswatch Swatchmaker非常棒,但有时你会尝试在更易编程的环境中包含Bootswatch主题,或者需要更好地理解Bootswatch主题是如何组合在一起的.这是我手动编译Bootswatch主题的方法.

1. 从源代码下载Twitter Bootstrap 并解压缩.
2. 移动Bootswatch文件variables.less,并bootswatch.less在less/文件夹,替换现有variables.less文件.
3. 最后bootstrap.less,追加@import "bootswatch.less";.
4. 编译bootstrap.less.我建议使用Bootstrap提供的grunt任务.

Answer 2

Bootswatch Swatchmaker

Bootswatch的制造商和维护者托马斯·帕克(Thomas Park)制作了一个名为Swatchmaker的小工具包,专门用于定制Bootswatch的主题或创建新的主题.

有关更多信息,请查看GitHub上Bootswatch回购中的Swatchmaker自述文件.

完成设置后,只需将要编辑的主题的LESS文件添加到swatch目录中,然后使用自定义项编辑变量.

swatchmaker.less的内容提供了一个很好的总结:

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

然后生成bootstrap.csslessc swatchmaker.less > bootstrap.css.