title: How can I customize Twitter Bootstrap's CSS using LESSCSS variables?
body: <p>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:</p>
  
  <pre><code>/html
      /bootstrap
         ...etc...
         /js
         /less
      /MyApp
         ...etc...
         /common_files
            /less
               style.less
  </code></pre>
  
  <p>Within my "style.less" file, I define a few LESS variables, then include the bootstrap files:</p>
  
  <pre><code>/* 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";
  </code></pre>
  
  <p>Since <a href="http://lesscss.org/#-variables" rel="nofollow noreferrer">LESSCSS variables are really constants</a>, I'm surprised that my @sansFontFamily is not getting picked up when I compile the LESS files into CSS: <code>lessc style.less &gt; MyApp.css --yui-compress</code></p>
  
  <p><strong>So...what am I missing? Why are my variables being overwritten by the variables defined within Bootstrap's LESS files?</strong></p>
  
  <p>*--I have checked out "<a href="https://stackoverflow.com/questions/10451317/twitter-bootstrap-customization-best-practices">Twitter Bootstrap Customization Best Practices</a>", but think taking advantage of constants would be a better approach (if I can get it to work).</p>