How can I customize Twitter Bootstrap's CSS using LESSCSS variables?
less, twitter-bootstrap
Solution
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.
Problem
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).