IntelliJ 12 won't pull in Sass variables

Question

I have a very basic Ruby on Rails installation. I have installed the bootstrap-sass gem, have the 'bootstrap-sass' ~> 2.3.1.0 in my Gemfile and ran bundle install. Restarted all applications. I have a style.css.scss file in app > assets > stylesheets which @imports 'bootstrap'; as well as the responsive. Those styles actually get pulled into my app, because they style the front-end. However, when I try to use a variable or mixin, I get the error in the image attached, as well as IntelliJ telling me it cannot find the variable. I'm new at this whole process, so I'm just trying to understand what's needed to resolve it.

I am using Ruby 2.0.0 and Rails 3.2.13rc2

https://docs.google.com/file/d/0BwMz3RH42HtQb0U1TXdHTVF0QjQ/edit?usp=sharing

@import "bootstrap";

body {
  padding-top: 60px;
}

@import 'bootstrap-responsive';

.footer {
  margin-top: 50px;
  color: $greyLight;

    a {
      color: #e5e5e5;
    }
}

here is a link to the live dev site on heruko, without use of the variables:

http://shrouded-ocean-4277.herokuapp.com/

EDIT: in my vendor/assets/stylesheets folder, there is no bootstrap folder or _mixins or _variables files. Should these have been installed when I placed the gem in the Gemfile and did an bundle install?

EDIT: adding my github: https://github.com/ChrisSki/omrails

Can you post the part of `style.css.scss` which uses the variable? — Bastien Jansen, Mar 20 '13 at 20:54

Bastien Jansen · Accepted Answer · 2013-03-21T13:43:27.837

1

Regarding your edit, the bootstrap will not be in vendor, but in a .gem file located somewhere inside your Ruby installation.

I set up a similar application recently, following this guide. I have 2 .css.scss files, one which includes and overrides parts of bootstrap, and the other one which contains my application's style (not directly related to Bootstrap). If you look at the second file, you can see that I imported bootstrap/variables because I needed to have access to some of Bootstrap's variables, and it works like a charm.

What I don't understand is why your original screenshot complains about something named variables, which I cannot see in your SCSS file... Have you tried bootstrap/variables instead?

EDIT:

I just cloned your repo, started the server and hacked style.css.scss. I think you made a typo in your tests :)

h1 {
    color: $greyLight; /* Does not work!! */
    color: $grayLight; /* Works :) */
}

edited Mar 21 '13 at 13:43

answered Mar 21 '13 at 09:03

Bastien Jansen

8,756
2
35
53

I updated my link to reflect a more precise error. I'm not sure how I captured the other one. I have tried `@import 'bootstrap/variables'` and I still don't get them pulled in. I updated my question with my github also. – chris_s Mar 21 '13 at 13:24
O...M...G. I want to delete this post. Thank you. I obviously need to learn how to slow down and pay more attention to the smaller details. – chris_s Mar 21 '13 at 13:50
Use the force, ~~Luke~~Chris! I think IntelliJ would provide correct autocompletion regarding available SASS variables. – Bastien Jansen Mar 21 '13 at 14:06
Yeah, that's the weird thing... it still can't recognize the variable. it's got to be user error. going to visit Yoda now... – chris_s Mar 21 '13 at 14:08
I realize this question is a year old, but I think the variable names have changed in new versions of bootstrap. I found that I had to use '$gray-light' and $gray-darker' instead. – Jeff Jun 11 '14 at 18:22

score 0 · Answer 2 · answered Mar 21 '13 at 01:49

You should declare your variables before you import bootstrap, then you can use the variables in your scss. For example, here's how I use variables in my rails app:

/************************ CSS Variables ***************************/
$myColor: #0F851C;    

/************************ Import Bootstrap ********************************/
@import 'bootstrap';
body { padding-top: 80px; }
@import 'bootstrap-responsive';

Just define your variables at the top of your scss, then import bootstrap. Then in your scss, you can use those variables like this:

#myDiv {
  color: $myColor;
}

Hope this helps!

I definitely understand it, I just thought that with the installation of the bootstrap-sass gem, it allowed access to bootstrap mixins and variables. bc it's a major part of allowing for quicker production. for instance, how would I access the mixin for rounded corners if this stylesheet doesn't import them? — chris_s, Mar 21 '13 at 02:39

IntelliJ 12 won't pull in Sass variables

2 Answers2