Могут ли хеши Ruby быть включены в Sass и CoffeeScript, позволяя делиться данными?

Мне интересно, может ли хэш-рубин делиться между Sass и CoffeeScript с минимумом суеты.

Я искал ответ на этот вопрос, но не нашел ничего убедительного. Источники, такие как documentation для Sass, расскажите о том, как связать файлы одного и того же типа и как управлять структурами данных в языке, но не касайтесь того, можно ли импортировать данные из других источников или можно ли интерпретировать код ruby каким-либо образом - только аналогичные вещь, о которой я могу думать, это компас с использованием файла .rb для его конфигурации.

Мой инстинкт предполагает, что это (или должно) быть возможно, оба языка похожи на Ruby и способны интерпретировать хеши.

Поскольку это практическая проблема, с которой я столкнулся несколько раз (DRYing pre-processing front end code, но также предоставляющий одинаковые значения для обработки на заднем плане, такие как создание SVG в HTML-шаблоне), но никогда не решался в действительно чистом виде я бы принял решение, которое связано с использованием Rails.

Обратите внимание, что я довольно подробно отношусь к этому вопросу, касающемуся стадии предварительной компиляции производства конечных активов, а именно Sass и CoffeeScript. Ответы, которые связаны с CSS, JavaScript или требуют браузера, не являются тем, что я ищу.

Дополнительные биты

Я решил добавить пример, вот три определения тех же данных, что и пары ключевых значений:

Ruby

colours = { brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' }
colours[:brandBackground]

Сасс-карта

$colours: ( brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' )
map-get($colours, brandBackground)

CoffeeScript

colours = { brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' }
colours.brandBackground

Определения Coheescript и Ruby идентичны, Sass очень близок... если это может сработать, тогда цвета (или любая другая переменная) могут быть определены в одном месте, а затем использоваться по всему фронту и обратно с помощью любого кода.

Ответ 1

Вы можете превратить свой CoffeeScript и SASS в шаблоны ERB, которые будут предварительно обработаны (и, следовательно, вы сможете использовать в них все потрясающие возможности Ruby). Существует небольшое сообщение, которое описывает это: https://robots.thoughtbot.com/dont-repeat-your-ruby-constants-in-javascript.

Обновление

Добавьте этот код в lib/shared_assets_data.rb:

module SharedAssetsData
  def self.colors_hash
    { brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' }
  end

  def self.sassify(hash)
    hash.map do |key, value|
      "#{key}: '#{value}'"
    end.join(', ').prepend('( ').concat(' )')
  end

  def self.coffefy(hash)
    hash.map do |key, value|
      "#{key}: '#{value}'"
    end.join(', ').prepend('{ ').concat(' }')
  end
end

Затем, чтобы включить автозагрузку каталога lib, добавьте эту строку в config/application.rb:

config.autoload_paths += %W(#{Rails.root}/lib)

После этого вы можете сделать следующее:

# screen.sass.erb
$colours: <%= SharedAssetsData.sassify(SharedAssetsData.colors_hash) %>
body
  background: map-get($colours, brandBackground)

# screen.coffee.erb
colours = <%= SharedAssetsData.coffefy(SharedAssetsData.colors_hash) %>
console.log colours.brandBackground

Ответ 2

Думаю, лучше всего использовать gon. Gon - это драгоценный камень, который позволяет передавать рубиновые переменные в javascript/coffeescript. Оттуда вы можете встроить стиль, который использует рубиновый хеш.

Sass/CSS действительно относятся только к стилям, и хотя Sass может иметь переменные и делать математику, вы не должны использовать его как хранилище для более сложных структур данных, это сделает ваш код очень сложным в обслуживании. Хранение и транспортировка данных просто не является задачей Sass.

Итак, что касается Гон. Попробуйте что-то вроде этого в контроллере:

gon.ruby_hash = {key: value}

теперь у вас coffeescript:

gon.ruby_hash

Вы можете получить доступ к хешу, вызвав gon.ruby_variable_name.