I've been beating myself up over this and tried different combinations and need help seeing through what I'm unable.
I transitioned to using bootstrap-sass for my simple rails 3.2.14 app, ruby 1.9.3, so that it can run on a PPC machine. I reviewed the Railscast episode on Sass Basics and have set up my files as such:
Gemfile
group :assets do
gem 'sass-rails'
gem 'coffee-rails'
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'
gem 'bootstrap-sass', '~> 2.3.2.2'
gem 'ruby-rc4', :require => "rc4"
gem 'nokogiri'
gem 'multi_json'
My application.css.scss
*= require_self
*= require_tree .
@import "bootstrap_and_overrides.css.scss";
@import "welcome.css.scss";
My bootstrap_and_overrides.css.scss
$main-color: #27ae19;
@import "bootstrap";
body { padding-top: 60px; background-color: $main-color;}
@import "bootstrap-responsive";
This boots up and the $main-color shows up in the body. The problem is that when I use the $main-color in the welcome.css.scss file, the app responds that $main-color is not recognized. That's to be expected per the Railscast episode. Ryan's solution makes sense in that I must remove the require_tree . line and @import the SCSS files in the order I want. Except, it doesn't pull in any css files, or it errors on the $main-color variable.
I've re-read Thomas McDonald's notes and they suggest the changes in the css should go above the @import bootstrap line. Tried that but no love. Ideally this ouught to work based on my understanding but it doesn't.
*= require_self
@import "bootstrap";
@import "bootstrap-responsive";
@import "bootstrap_and_overrides.css.scss"; #after removing the bootstrap, bootstrap-responsive.
@import "welcome.css.scss";
which yields a white screen. I've googled and kept restarting my server to clear out any caching. Help me understand what I'm doing wrong, thanx, sam
