Генерация динамического CSS с использованием шаблонов

Question

Я хочу генерировать динамический CSS с использованием шаблонов и Tilt а такжеSASS в Rails 4,

1. Допустим, у меня есть следующее css.sass шаблон:

   $class_name: test
   $width: 329 
   $height: 425 
   
   .view-#{$class_name}
   
     width: #{$width}px
     height: #{$height}px
   

2. я нуждаюсь master.css.sass.erb (Я не уверен насчет формата), в котором я собираюсь отображать свой шаблон столько раз, сколько мне нужно, с различными параметрами.

3. В application.cssЯ собираюсь иметь что-то вроде этого

   *= require master.css.sass.erb
   

Каждый раз, когда я использую шаблон с различными параметрами, я собираюсь добавить строку в master.css.sass.erb файл. Я не знаю, как передать параметры с помощью Tilt к css.sass шаблон. Может ли кто-нибудь помочь и сказать, возможно ли это?

---

Это то, что я имею до сих пор:

1. Шаблон test.css.sass.erb:

   $color: <%= color %>
   body
     background: #{$color} !important
   

2. master.css.sass.erb файл:

   <%
       require 'erb'
       config_path = File.expand_path("../test.css.sass.erb", __FILE__)
       template = Tilt.new(config_path)
       template.render(self, :color => 'yellow')
   
   %> .thisisrendered
       color: red
   

Обратите внимание, что два файла в одной папке. Проблема в том, что визуализируется только следующий CSS:

.thisisrendered
    color: red

Answer 1

Чтобы ответить на ваш вопрос: когда erb компилируется, он выводит только код ruby, содержащийся в оболочке <% = code%>. Ваш текущий код, вероятно, работает нормально (я не знаком с Tilt или прямым SASS), но вы не говорите ему выводить результат в файл sass. Изменить первую строку master.css.sass.erb от <% в <%= и тогда вы можете отлаживать оттуда.

При этом я бы рекомендовал против этого процесса. Вы будете тратить ресурсы на компиляцию таблицы стилей каждый раз, когда она вызывается.

Альтернативный метод заключается в том, чтобы просто сохранять ваши таблицы стилей статичными, как в начальном примере, чтобы их можно было предварительно скомпилировать и кэшировать, а затем создать частичное подобное layouts/_conditional_styles.html.erb используя фондовый HTML и CSS, как:

<% unless @your_sanitized_style_object.nil? %>
  <style>
    body{
      background: <%= @your_sanitized_style_object.background_color.html_safe %> !important;
    }
  </style>
<% end %>

Который может переопределить таблицу стилей приложения, будучи отрисованным после файла CSS приложения в вашем layouts/application.html.erb файл, такой как:

<%= stylesheet_link_tag "application" %>
<%= render "layouts/conditional_styles" %>

---

Чтобы ответить на ваш вопрос о том, почему вы используете меньше ресурсов, используя предварительно скомпилированные ресурсы, а затем переопределяете их, рассмотрите ваш пример. test.css.sass.erb

$color: <%= color %>
body
  background:$color !imporant

Предполагая, что переменная цвета - красный, процесс будет выглядеть примерно так... Сначала ваше приложение будет проходить через него с помощью компилятора erb и даст вам test.css.sass файл, такой как:

$color: #ff0000
body
  background:$color !important

Затем ваше приложение будет снова проходить через код с помощью sass-компилятора, чтобы дать вам test.css файл, такой как:

body{ background:#ff0000 !important; }

И после всего этого, он будет обслуживать файл. В вашей среде разработки вы не увидите такой большой разницы в производительности, поскольку ваше приложение по умолчанию перестраивает ресурсы для каждого запроса. Разница наступает тогда, когда приходит время подавать ваше приложение в Интернете на производстве.

Если ваши ресурсы не зависят от переменных в приложении, таблицы стилей можно предварительно скомпилировать. Это означает, что ваше приложение компилирует ресурс один раз, а после того, как оно компилирует ресурс, вы получаете таблицу стилей, например test-f25ab2b1286feb7cc98375sac732f7d0.css,

Таблицы стилей будут идентичны, но уникальным является тот жаргон, который rails добавляет в конец имени файла, когда он что-то компилирует. Этот жаргон известен как отпечаток пальца, и его цель - сообщить серверу о входящем запросе, существует ли более новая версия файла. Если файл не был изменен, и система, выполняющая запрос, уже загрузила этот файл в свой кэш, тогда ваш браузер будет использовать кэшированную версию вместо повторной загрузки таблицы стилей.

Теперь давайте скажем ваш test.css.sass.erb Например, файл размером около 50 КБ.

• Без предварительной компиляции стоимость вашего ресурса:

  1. необходимость проходить этот файл размером 50 КБ 2 раза при каждом запросе, чтобы скомпилировать его из erb > sass > css

  2. необходимость обслуживать этот файл 50 КБ при каждом запросе.

• С предварительно скомпилированными активами, которые переопределяются условными стилями, встроенными в html макета, как описано в моем первом ответе:

  1. Ваши затраты на компиляцию снижаются почти до нуля, потому что таблица стилей предварительно скомпилирована, так что ничего не поделаешь whatever.html.erb шаблон, который содержит условные стили, уже компилируется вашим erb-компилятором, поэтому вы просто добавляете работу рендеринга переменных.

  2. Предварительно скомпилированную таблицу стилей вы обслуживаете только один раз, что означает, что вы экономите ~50 КБ в полосе пропускания на каждый запрос, используя только байты, необходимые для визуализированных зависимых стилей.

Надеюсь, это поможет, для получения дополнительной информации о том, как все это работает, я бы порекомендовал начать с Руководства по рельсам для конвейера активов.