Twitter Bootstrap LESS css

Question

I am wondering why I cant set variables within twitter bootstrap using LESS. I am using ruby on rails which has a bootstrap_and_overrides.css.less file. it has the following statement

    // Your custom LESS stylesheets goes here
    //
    // Since bootstrap was imported above you have access to its mixins which
    // you may use and inherit here
    //
    // If you'd like to override bootstrap's own variables, you can do so here as well
    // See http://twitter.github.com/bootstrap/less.html for their names and    documentation
    //
   // Example:
   // @linkColor: #ff0000;

So my understanding is that i can set my variables within here. So i set

  @black: #333;

and then tried using it in my application.css calling @black file but it does not work? i.e. doesn’t render #333.

Am i understanding this incorrectly?, do all my variables and css styling go within the bootstrap and override file?

Any advice appreciated

score 0 · Answer 1 · edited May 23 '17 at 12:21

Follow the instructions at http://lesscss.org/#usage to make sure your updated less is used, if you are using it client side.

OR

Compile your updated less into CSS and then copy over the updated CSS. Here's a list of tools that can do the compile. http://bootstrap.lesscss.ru/less.html#compiling

For suggestions on how to organize your bootstrap modifications see the SO question Twitter Bootstrap Customization Best Practices

As an aside, I wouldn't recommend changing @black. Changing it would alter many, many things, including some you might not expect.

GaryP · Answer 2 · 2013-08-31T03:35:45.233

If I understood you correctly, you are modifying your bootstrap_and_overrides.css.less file, but the one being used is the application.css file.
If that was the case, of course it's is just natural not to reflect the changes you've made. You must compile your .less file first to .css. to reflect that changes to your .css file.

For a try, use LESS via the client-side and setup your environment like so:

For instance, in your index.html file, put

<link rel="stylesheet/less" type="text/css" href="application.less" />

in the document head. and below it add

<script src="less.js" type="text/javascript"></script>

Download the less.js file from here. and put it inside your root directory, or you may of course customize the location and make the necessary path in the href attrib.

After doing the above, you're ready to modify your application.less file (not the application.css). You may copy you're existing custom styles from the application.css file.

application.less is where you should put your variables.

You may rename your bootstrap_and_overrides.css.less file into application.less and make sure it is the one linked to in the header tag.

For more info about LESS CSS checkout the wiki.

Twitter Bootstrap LESS css

2 Answers2