less - How can I customize Twitter Bootstrap's CSS using LESSCSS variables?

Question

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

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";

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

So...what am I missing? Why are my variables being overwritten by the variables defined within Bootstrap's LESS files?

*--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).

Answer 1

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:

If you're using Bootstrap version 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, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

If you're using Bootstrap version 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;

---

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