Как я могу получить доступ к объектам Rails в Sass?

Question

В проекте Rails 3.1.0 у меня есть компании с несколькими настраиваемыми атрибутами, такими как background_color и link_color. Я хочу иметь возможность установить некоторые переменные Sass, например, так:

$background_color: <%= @company.background_color %>
$link_color: <%= @company.link_color

...

Это не работает, потому что @company ноль, когда Sass делает свое дело. Я не уверен, как решить эту проблему динамичным образом (можно создавать компании, менять цвета и обновлять представления немедленно). Какие-либо предложения?

Answer 1

Я могу думать о паре приближается к макушке:

1. Служите вашей таблице стилей через контроллер.
2. Используйте CSS-классы для настройки цветов и обслуживайте только этот CSS через контроллер, встроенный частичный или CSS @import,

Обслуживание таблицы стилей через контроллер довольно просто, поэтому сказать особо нечего. Это может быть немного уродливо и громоздко.

Для второго вы бы добавили пару дополнительных классов CSS:

.custom-bg {
    background-color: some-default-bg;
}
.link-fg {
    color: some-default-fg;
}
/*...*/

Тогда любому элементу, который должен использовать пользовательский цвет фона, потребуются их обычные классы CSS и custom-bg; аналогичные махинации потребуются для других настраиваемых значений. Чтобы предоставить настроенный CSS, вы можете вставить <style> элемент в ваш HTML, используя стандартную часть ERB, или вы можете обслуживать CSS через контроллер (либо через <style src="..."> или же @import). Таким образом, вы подделаете SASSy совершенство с помощью старых классов CSS в своем HTML.

Там также JavaScript. Вам понадобится какой-то способ определить элементы, для которых нужно настроить их цвета, а затем настроить их напрямую с помощью таких вещей:

$('.need-custom-background').css('background-color', '...');

Answer 2

Я думаю, что вы могли бы сделать что-то вроде того, что у вас есть, но вам нужно изменить расширения файлов на.css.scss.erb

Answer 3

Чтобы развить это, я создал контроллер таблиц стилей, но он был довольно изобретателен для правильной работы парсинга Sass и загрузки конвейера ресурсов. Я закончил с дампом и реорганизацией стилей, чтобы создать статическую таблицу стилей для каждой компании, которая будет обновлена ​​и загружена в S3 при обновлении компании.

Answer 4

Что ж, если вы имеете в виду динамический объект, такой как модель, загруженная через контроллер, вы действительно не можете, по крайней мере, не очень легко. Это связано с тем, что в отличие от шаблонов HTML ERB, шаблоны SASS обычно отображаются один раз и обслуживаются статически, если что-то не изменится в коде или они не будут повторно прекомпилированы с помощью rake (в зависимости от конфигурации вашей среды). Но вы можете получить доступ к некоторым вспомогательным методам, глобальным объектам и использовать там некоторый рубин, переименовав файл с расширением "erb", напримерapplication.css.scss.erb. Видеть

• https://guides.rubyonrails.org/asset_pipeline.html
• Как я могу использовать переменные Ruby/Rails внутри Sass?)

Если вам нужны стили на основе динамически загружаемых объектов, например моделей, вы можете...

1. Пишите стили CSS буквально в шаблоне
2. Компилируйте таблицы стилей динамически. См. Самый популярный ответ здесь: Как создать динамический CSS в Rails?
3. В некоторых случаях вы можете сделать то же самое, используя иерархию путей импорта Rails/SASS (например, SASS @import 'partial_name_with_no_path' сначала выполнит поиск в папке с импортируемыми файлами SASS, а затем вернется на верхний уровень - вы также можете настроить это).