2015-06-05 2 views
4

Я хочу, от помощника, чтобы сделать некоторые переменные в .scss.erb шаблоне, который делает использование функции image-url() Sass:Динамически визуализация SASS файла через звездочки

// template.scss.erb 

#<%= id %> { 
    background-image: image-url('<%= image_file %>'); 
} 

До сих пор ERB часть была легко :
(используя this stack overflow answer)

vars_binding = OpenStruct.new(
       id:   'foo', 
       image_file: 'foo.jpg' 
       ).instance_eval { binding } 

template = File.read('path/to/template.scss.erb') 

rendered_sass = ERB.new(template).result(vars_binding) 

Запуск этого кода, sass теперь равна:

#foo { 
    background-image: image-url('foo.jpg'); 
} 

Однако, когда я в следующий раз попробуйте запустить:

css = Sass::Engine.new(
    rendered_sass, 
    syntax:  :scss, 
    cache:  false, 
    load_paths: view_context.assets.paths, 
    read_cache: false, 
    style:  :compressed 
).render 

возвращает

NoMethodError: undefined method `[]' for nil:NilClass 
from …/sprockets-3.2.0/lib/sprockets/sass_processor.rb:267:in `sprockets_context' 

, потому что вызов Sass::Engine не обеспечивает контекст Звездочки.

Если я удалю image-url() из шаблона .scss.erb, замените его на родной url(), он будет корректно отображаться как CSS, без проблем.

Как я могу визуализировать этот шаблон в контексте звездочек?

ответ

7

После рытья через similar question и много проб и ошибок, я нашел свое решение: я должен поставить :sprockets хэш при вызове Sass::Engine.new.

css = Sass::Engine.new(
    rendered_sass, 
    syntax:  :scss, 
    cache:  false, 
    load_paths: view_context.assets.paths, 
    read_cache: false, 
    style:  :compressed, 

    # The key ingredient… 
    sprockets: { 
    context:  view_context, 
    environment: view_context.assets 
    } 
).render 

Следует отметить, что view_context был принят от просмотра файла, но он мог бы также ActionView::Base.new

+0

спас мою жизнь :) – beydogan

+0

Спасибо! Что-то еще, с чем я борюсь, заключается в том, что я хотел бы заставить «image-url()' помощник SASS генерировать абсолютные пути. Есть идеи? – Drew

+0

Не могли бы вы дать немного больше информации о view_context? При попытке вызова #assets в экземпляре ActionView :: Base я получаю ошибку метода. Я уверен, что это близко к тому, что мне нужно, но я не совсем понимаю, что здесь делает контекст звездочек. – sammms

1

После борьбы с тем же вопросом я нашел живой пример той же функциональности на Github страница, на удивление не похожая.

https://github.com/BLauris/custom-css-for-user

Существует статья автора, поясняющая способ по этой ссылке: http://www.diatomenterprises.com/dynamically-compile-stylesheets-with-rails-and-sass/

Смежные вопросы