rails 4.2.0, sass-rails 5.0.1, and bootstrap-sass 3.3.3 Undefined variable: "$state‐danger‐text" - bootstrap-sass

Question

I'm trying to follow Michael Hartl's Ruby on Rails Tutorial 3rd Edition with a slightly modified Gemfile and Sassy CSS files. When I try to use bootstrap-sass variables and mixins to display bootstrap powered validation errors in my custom.css.scss I get "Undefined" error.
I've confirmed that the variable exists in my {"bundle show bootstrap-sass" path}/assets/stylesheets/bootstrap/_variables.scss It seems like it doesn't lookup that file before throwing the error.
Please let me know how to fix this issue. Thanks a lot!
Here is my Gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0'
# Use pg as the database for Active Record
gem 'pg', '0.18.1'
gem 'bcrypt', '3.1.7'
gem 'faker', '1.4.2'
gem 'carrierwave', '0.10.0'
gem 'mini_magick', '3.8.0'
gem 'fog', '1.23.0'
gem 'will_paginate', '3.0.7'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'bootstrap-sass', '3.3.3'
# Use SCSS for stylesheets
gem 'sass-rails', '5.0.1'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '2.7.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '4.1.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails', '4.0.3'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks', '2.5.3'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '2.2.6'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '0.4.1', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', '3.5.1'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '2.0.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring', '1.2.0'
end
group :test do
gem 'minitest-reporters', '1.0.5'
gem 'mini_backtrace', '0.1.3'
gem 'guard-minitest', '2.3.1'
end
group :production do
gem 'rails_12factor', '0.0.3'
gem 'puma', '2.11.1'
end
Here is my application.css.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import "custom.css.scss"
And Here is my custom.css.scss
#error_explanation {
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
#extend .has‐error;
.form‐control {
color: $state‐danger‐text;
}
}

Answer 1

After 20 hours, I finally found out that I get the error only when I copy the codes from the tutorial to sublime text 2. I wrote every related line myself and it is now working as it should, no errors. May be some weird character is sneaking in when I copy. Quite strange!