当前位置: 动力学知识库 > 问答 > 编程问答 >

css - bootstrap variables not available in rails

问题描述:

How do I get the @screen-sm @screen-md @screen-lg variables to work, and not give me errors? in rails using the bootstrap-sass gem?

When I remove the @screen-sm @screen-md @screen-lg variables and replace them with pixel values, the errors in my browser go away. But when I use these variables, the browser rails error says these arguments are invalid.

I am using bootstrap-sasts 3.0.3.

I also have //=require bootstrap in my application.js file.

The github page https://github.com/twbs/bootstrap-sass says doing so will cause variables to not be available in other files, but even when i removed this line from my js file, I still could not use the variables in my application.css.scss file.

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]

网友答案:

Today I've bumped into the same problem. I think the root of the problem is that you are mixing syntax (Less vs sass).

If your are writing a Less oriented stylesheet variables are referenced using @ operator. Whereas writing stylesheet using scass (I've inferred that because the name of the file application.css.scss) variables are referenced using $.

So, your stylesheet must be written as follow:

...

@import "bootstrap";

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

}

...
分享给朋友:
您可能感兴趣的文章:
随机阅读: