Используя переменные .css.scss в jQuery? - PullRequest
Новая
       19

Используя переменные .css.scss в jQuery?

1 голос
/ 11 февраля 2012

Я работаю над приложением Rails 3.1 и с удовольствием использую SASS и CoffeeScript. Мне особенно нравятся расширения переменных SASS и импорт. Я создал один файл _global-settings.css.scss, который содержит ВСЕ значения шестнадцатеричных констант, которые я использую во всех моих таблицах стилей. Это дает мне единое место для управления цветами, шрифтами и размерами макета. Очень СУХОЙ.

Но, если я хочу использовать JQuery для динамической настройки css, у меня больше нет доступа к моим переменным времени компиляции css, и я должен воспроизводить те же данные, что и JSON-хеш, в файле .js.coffee. Совсем не СУХОЙ.

Вот мой вопрос: прежде чем я уйду и соберу грабли, чтобы превратить мой файл настроек CSS в эквивалентный хэш CoffeeScript, у кого-нибудь есть более умная идея? Как скрыть все значения в скрытом div в html-файле?

1 Ответ

4 голосов
/ 11 февраля 2012

Вам было бы проще перенести свою конфигурацию CSS в Ruby и затем отправить _global-settings.css.scss и небольшой кусочек CoffeeScript через ERB. Тогда у вас есть настройки и вы можете получить к ним доступ везде.

Где-то в Ruby у вас будет это: 

CSS_SETTINGS = {
    :text_color        => '#333',
    :text_color_hilite => '#f33',
    :font_size         => '14px',
    #...
}

Затем переименуйте ваш _global-settings.css.scss в _global-settings.css.scss.erb и используйте внутри него такие вещи: 

$text-color: '<%= CSS_SETTINGS[:text_color] %>';
// ...

А внутри global_settings.js.coffee.erb вы могли бы иметь это: 

window.app.global_settings = <%= CSS_SETTINGS.to_json.html_safe %>

Вы могли бы даже написать простой помощник вида, который бы SASSify Hash: 

def sassify(h)
    h.map do |k, v|
        # You might want more escaping for k and v in here, this is just
        # a simple proof of concept demo.
        [ '$', k.to_s.gsub('_', '-'), ': ', "'#{v}'", ';' ].join
    end.join("\n")
end

и тогда вы можете сказать это в своем _global-settings.css.scss.erb: 

// Import global CSS settings.
<%= sassify(CSS_SETTINGS).html_safe %>

Вы также можете сделать обезьянку, исправившую to_sass в Hash и использовать CSS_SETTINGS.to_sass, но это, вероятно, слишком далеко заходит.

...