Question

I am trying to use LESS variables in Twitter Bootstrap but cant seem to get them to render in my application.css file

So when i setup bootstrap i installed

rails generate bootstrap:install --less

Which gave me my

bootstrap_and_overrides.css.less 

So my understanding is that in this file i can set my LESS variables like so

@white:#FFFFFF;

and then in my css file i can just call them like so

color: @white;

In my bootstrap.less file i call these

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";
@import "twitter/bootstrap/variables.less";

and in my application.css file i call the bootstrap file

*= require bootstrap_and_overrides

Gemfile

gem 'less-rails'

This doesnt work and my variables are not being applied

Can anyone see anything that i am doing wrong?

any help appreciated

Thanks

Answer 1

… I can set my LESS variables like so

@white:#FFFFFF;

and then in my css file i can just call them like so color: @white;

Hi, I’m not so familiar with using LESS inside Rails, so apologies if I’m off here.

I can only use less variables inside a file which will be compiled. So for example I can set
@white:#FFFFFF in a variables.less file

perhaps in a custom.less file I have
.light{
color:@white;
}

After I’ve compiled everything I can use the class .light in my CSS

So to address your quote above, you can set your less variables like
@white:#ffffff
and then you can use that variable in another less file which will be compiled, but not directly in a CSS file.