bootstrap變量在rails中不可用

Question

如何獲得@ screen-sm @ screen-md @ screen-lg變量的工作方式，而不會給我錯誤？在使用bootstrap-sass gem的rails中？

當我刪除@ screen-sm @ screen-md @ screen-lg變量並將它們替換爲像素值時，瀏覽器中的錯誤消失。但是當我使用這些變量時，瀏覽器導軌錯誤說這些參數是無效的。

我正在使用bootstrap-sasts 3.0.3。

我的application.js文件中也有//=require bootstrap。 github頁面https://github.com/twbs/bootstrap-sass說這樣做會導致變量不能在其他文件中使用，但即使當我從我的js文件中刪除此行時，我仍然無法使用我的application.css.scss文件中的變量。

application.css.scss

*= require_self 
*= require_tree . 
*/ 
@import "bootstrap"; 

/* Small devices (tablets, 768px and up) */ 
@media only screen and (min-width: @screen-sm){ 

} 

/* Medium devices (desktops, 992px and up) */ 
@media only screen and (min-width: @screen-md){ 

} 

/* Large devices (large desktops, 1200px and up) */ 
@media only screen and (min-width: @screen-lg){ 

} 

的Gemfile

source 'https://rubygems.org' 
    ruby "2.0.0" 

    gem 'rails', '4.0.0' 
    gem 'uglifier', '>= 1.3.0' 
    gem 'sass-rails', '~> 4.0.0' 
    gem 'coffee-rails', '~> 4.0.0' 
    gem 'jquery-rails' 
    gem 'turbolinks' 
    gem 'jquery-turbolinks' 
    gem 'jbuilder', '~> 1.2' 
    gem 'sprockets-rails', :require => 'sprockets/railtie' 

    group :doc do 
     # bundle exec rake doc:rails generates the API under doc/api. 
     gem 'sdoc', require: false 
    end 

    gem 'html2haml', '~> 1.0.1' 
    gem 'haml-rails', '0.5.1' 
    gem 'bootstrap-sass', '~> 3.0.3.0' 

    gem 'figaro', '~> 0.7.0' 
    gem 'nokogiri', '~> 1.6.0' 
    gem 'paperclip', '~> 3.0' 
    gem 'paperclip-dropbox', '>= 1.1.7' 
    gem 'devise' 

    group :development do 
     # erubis is already included in action pack 
     gem 'ruby_parser', '~> 3.1.1' 
    end 

    group :development, :test do 
     gem 'sqlite3' 
    end 

    group :production do 
     gem 'pg' 
     gem 'rails_12factor' 

     #gem 'aws-sdk', "~> 1.0" 
    end 

    # Use ActiveModel has_secure_password 
    # gem 'bcrypt-ruby', '~> 3.0.0' 

    # Use unicorn as the app server 
    # gem 'unicorn' 

    # Use Capistrano for deployment 
    # gem 'capistrano', group: :development 

    # Use debugger 
    # gem 'debugger', group: [:development, :test] 

Answer 1

今天我碰到了同樣的問題。我認爲問題的根源在於你在混合語法（Less vs sass）。

如果您正在編寫使用@運算符引用的面向對象的樣式表變量。儘管使用scass編寫樣式表（我推斷出因爲文件名application.css.scss）的變量是使用$引用的。

所以，你的樣式必須寫成如下：

... 

@import "bootstrap"; 

/* Small devices (tablets, 768px and up) */ 
@media only screen and (min-width: $screen-sm){ 

} 

...