переменные начальной загрузки недоступны в рельсах

Как заставить переменные @screen-sm @screen-md @screen-lg работать и не выдавать ошибок? в рельсах с помощью драгоценного камня bootstrap-sass?

Когда я удаляю переменные @screen-sm @screen-md @screen-lg и заменяю их значениями пикселей, ошибки в моем браузере исчезают. Но когда я использую эти переменные, ошибка рельсов браузера говорит, что эти аргументы недействительны.

Я использую bootstrap-sast 3.0.3.

У меня также есть //=require bootstrap в моем файле application.js. На странице 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]

variables css mixins include bootstrap-sass
person ahnbizcad    schedule 21.04.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Сегодня столкнулся с такой же проблемой. Я думаю, что корень проблемы в том, что вы смешиваете синтаксис (Less vs sass).

Если вы пишете менее ориентированные переменные таблицы стилей, на них ссылаются с помощью оператора @. Принимая во внимание, что при написании таблицы стилей с использованием scass (я сделал вывод об этом, потому что имя файла application.css.scss) переменные ссылаются с использованием $.

Итак, ваша таблица стилей должна быть написана следующим образом:

...

@import "bootstrap";

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

}

...
person DiegoS    schedule 24.06.2014