如何使用LESSCSS变量自定义Twitter Bootstrap的CSS? [英] How can I customize Twitter Bootstrap's CSS using LESSCSS variables?

问题描述

我试图在不更改引导程序代码的本地副本的情况下自定义Twitter Bootstrap的CSS.*因此，我已将Twitter Bootstrap项目克隆到一个文件夹中，并将我的应用程序代码保存在其自己的文件夹中:

I am trying to customize Twitter Bootstrap's CSS without altering local copies of the bootstrap code.* So I have cloned the Twitter Bootstrap project into one folder and have my application code within its own folder:

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

在我的"style.less"文件中，我定义了一些LESS变量，然后包含了引导文件:

Within my "style.less" file, I define a few LESS variables, then include the bootstrap files:

/* 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变量确实是常量，我很惊讶我的@sansFontFamily没有被选中当我将LESS文件编译成CSS时出现错误:lessc style.less > MyApp.css --yui-compress

Since LESSCSS variables are really constants, I'm surprised that my @sansFontFamily is not getting picked up when I compile the LESS files into CSS: lessc style.less > MyApp.css --yui-compress

那...我想念什么?为什么我的变量被Bootstrap的LESS文件中定义的变量覆盖?

*-我已签出" Twitter Bootstrap自定义最佳做法"，但是认为利用常量会是一种更好的方法(如果我可以使用它的话).

*--I have checked out "Twitter Bootstrap Customization Best Practices", but think taking advantage of constants would be a better approach (if I can get it to work).

推荐答案

正确的方法是先导入引导资产，然后然后使用LESS变量定义自定义值.因此，考虑到问题中的目录结构:

The correct approach is to import the bootstrap assets first, then define the custom values with LESS variables. So, given the directory structure in the question:

/* 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, Tahoma, sans-serif, 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, Tahoma, sans-serif, Arial;
@font-size-base: 11px;
@line-height-base: 18px;

---

完整的变量列表可在variables.less中找到文件.

---

Complete list of variables can be found in variables.less file.

这篇关于如何使用LESSCSS变量自定义Twitter Bootstrap的CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！