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
... 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.
Related
Im new to SASS and have a question, perhaps I'm not understanding correctly.
I have my base file (global.scss) and then several partial files. I'm working on a project currently and I want to define a few custom colors to use throughout (as in, I want to be able to define $color-navy as '#162a3e'). How can I set these variables and access them in my partial files and my base file?
I really hope this makes sense, I'll try and clarify more if needed.
First you make a file variables.scss with content like
$navy: #162a3e;
Next you just include this file at the beginning of each partial (and your global) as follows:
// Import this in any partial and in your global.scss
#import "variables";
// you have access to $navy ! yay
.saucy{
color: $navy;
}
Technically you can get away with just importing it in your global.scss if and only if you are just compiling global.scss (and not the partials as individual stylesheets) but that's a bigger topic. It doesn't hurt really to just import variables.scss every time.
I'm trying to load an .less file into my main theme, this is my filestructure:
main.less
themes/pink.less
themes/yellow.less
themes/blue.less
I'm using this mixin to retrieve the selected theme:
.theme(#filename){
#import 'themes/#{filename}.less';
}
.theme('pink');
It doesn't work and I get this error:
SyntaxError: variable #filename is undefined
.theme('pink');
I'm used to do the same with background images without getting errors, where I'm wrong?
Unfortunately Less.js throws the error you describe with imports for .less files (it works fine with imports for .css files), if you define the variable in in the mixin parameter/attribute, but it works if you define the variable directly inside (localy) or outside the mixin (globaly). For example, this should work:
#filename: 'pink';
.theme(){
#import 'themes/#{filename}.less';
}
.theme();
Here is a link to a discussion where the plan of implementing this has been discussed a while ago, and it seems that the longterm goal is to have your version working as well, it just hasn't happened yet completely ^_^
However, if you just want to load a theme according to the variable, you can do it without the mixin. just by doing something like this:
#theme: 'pink';
#import 'themes/#{theme}.less';
I've got a rails app using the bootstrap-sass gem. I'd like to change the width the navbar collapses from tablet (979px) to phone (769px). Overriding a media query isn't a tidy solution.
I've edited #navbarCollapseWidth in variables.less and built bootstrap, then copied the contents bootstrap-responsive.css into responsive.scss in gems...vendor/assets/stylesheets/bootstrap. Now however, I've lost the ability to update the gem without losing my changes.
What's the best method here? I'd like to make what I think is a simple change but keep my gem update-able. Perhaps using #import "bootstrap-responsive-mine"; in application.css.scss then manually updating that file when I need to?
Did you read some info about configuration this gem?
Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables!
#import "bootstrap";
Need to configure a variable or two? Simply define the value of the
variable you want to change before importing Bootstrap. Sass will
respect your existing definition rather than overwriting it with the
Bootstrap defaults.
$navbarCollapseWidth: 769px;
#import "bootstrap";
Or that is not what you need?
What I have:
In Rails 3.2.2, I have the following stylesheets:
app/assets/stylesheets
|
|-- application.css
|-- bootstrap_and_overrides.css.less
|
|-- annotations.css.less
|-- maps.css.less.erb
`-- users.css.less.erb
The two first ones are more or less system-default. The other ones are where I define my custom styles.
So, application.css, as usual, includes all the other files:
*= require_self
*= require_tree .
And bootstrap_and_overrides.css.less, of course, includes Twitter Bootstrap as well as some other custom defined LESS variables.
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
// other stuff
#brown_text: #332820;
What doesn't work:
Now, in annotations.css.less, I'd like to use #brown_text, but it gives me:
variable #brown_text is undefined
I figure this is because there's no reference from annotations.css.less to the "master" file where the variable would be defined. And it seems that annotations.css.less is compiled first – note that I'm currently in development environment.
So, how can I use my custom LESS variables then, and make them available in other stylesheet files? My current "fix" is to just move all my custom styles into bootstrap_and_overrides.css.less.erb, which doesn't seem very clean at all.
What also doesn't work:
Just importing the LESS files isn't possible, because they use Rails' asset path helpers. And importing an ERB file is also not possible, since the #import statement won't find the file, because it expects a .less suffix.
You don't need to use ERB for asset path helpers – they're actually baked into the less-rails gem, which you can reference here: https://github.com/metaskills/less-rails/#helpers
You should be able to just use asset-path or asset-url anywhere you've used ERB to refer to the assets pipeline.
Given this, the best way to go would be to:
Convert application.css to application.css.less
Delete all the Sprockets directives
#import each individual file in the directory.
Remove the .erb extension from any files that have it, and change ERB asset helpers to less-rails asset helpers.
Make sure annotations.css.less is imported after bootstrap_and_overrides – this is why it's usually not a good idea to use require_tree ., since you can't control the order in which the files are loaded. The way you have it now, annotations.css.less would be loaded before bootstrap_and_overrides – before the variable you want to use even exists.
Hope that helps!
The way twitter-bootstrap-rails is compiling things, you will need to import your other LESS stylesheets into the overrides file. So for an additional file, annotations.less:
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
//other LESS styles
#import "annotations"
For more, look into less-rails, which this gem uses underneath.
When a rails app is created with rails 3.1 or 3.2.0.rc2 it by default creates an app/assets/stylesheets/application.css file, however each controller/model created there after creates an app/assets/stylesheets/<controller or model name>.scss.
Why isn't an application.scss created by default?
How do you properly incorporate an application.scss and get rid of the application.css entirely?
I would just rename it to application.scss and then you can import in your other .scss files like this:
// Inside application.scss
// HTML Reset
#import "reset.scss";
// Users CSS
#import "users.scss";
When you compile the SCSS, it will generate the application.css for you from all of the other imported files or CSS within that file.
application.css just plays like a house keeper, it represents the correct order of other .scss files.
Put the real working CSS in application.css may not good practice, as the comment generated by rails below:
You're free to add application-wide styles to this file and they'll
appear at the top of the compiled file, but it's generally better to
create a new file per style scope.