twitter-bootstrap – 如何使用LESSCSS变量自定义Twitter Bootstrap的CSS？

我试图自定义Twitter Bootstrap的CSS而不改变引导代码的本地副本.*所以我将Twitter Bootstrap项目克隆到一个文件夹中,并将我的应用程序代码放在它自己的文件夹中：

/html
    /bootstrap
       ...etc...
       /js
       /less
    /MyApp
       ...etc...
       /common_files
          /less
             style.less

在我的“style.less”文件中,我定义了一些LESS变量,然后包含引导程序文件：

/* custom settings that deviate from Bootstrap's default values */
@sansFontFamily: Trebuchet MS,Tahoma,sans-serif,Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";

从LESSCSS variables are really constants开始,当我将LESS文件编译成CSS时,我很惊讶我的@sansFontFamily没有被拿起来：lessc style.less> MyApp.css –yui-compress

那么……我错过了什么？为什么我的变量被Bootstrap的LESS文件中定义的变量覆盖？

* – 我已经检查了“Twitter Bootstrap Customization Best Practices”,但是考虑利用常数将是一种更好的方法(如果我可以让它工作).

解决方法

正确的方法是首先导入引导资产,然后使用LESS变量定义自定义值.所以,考虑到问题中的目录结构：

如果您使用的是Bootstrap 2.x版：

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";

/* custom settings that deviate from Bootstrap's default values */
@sansFontFamily: Trebuchet MS,Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

如果您使用的是Bootstrap 3.x版：

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";

/* custom settings that deviate from Bootstrap's default values */
@font-family-sans-serif: Trebuchet MS,Arial;
@font-size-base: 11px;
@line-height-base: 18px;

完整的变量列表can be found in variables.less文件.