CSS переменные на Ruby on Rails

В посте про реализацию CSS переменных на PHP я вкратце упоминал про мою адаптацию этого способа для Ruby on Rails. Похоже, звезды уже выстроились нужным образом, что не забегая к гадалке, можно уже выложить коды.

Для реализации переменных CSS я использовал CSS-SSC от Shaun Inman. С некоторыми поправками исходя из особенностей моего приложения:

1. Стили CSS у меня находятся внутри шаблона, а не в отдельном файле;
2. Реализация разделения на переменные и константы мне не нужна;
3. У меня только один тег style в шаблоне.

В отличие от оригинального CSS-SSC я решил определение переменных делать без значка доллара ($), а подстановку значений переменных -- с ним. Блажь у меня такая.

@server constants {
  variableName: variableValue;
}

body {
  color: $variableName;
}

Пример: необработанный HTML

<style type="text/css">
@server constants {
  bodyBackgroundColor: #FFF;
  bodyFaceColor: #000;
  bodyFont: 11px/1.5em Arial, Helvetica, sans-serif;
}

body {
  font: $bodyFont;
  background-color: $bodyBackgroundColor;
  color: $bodyFaceColor;
}
</style>

Перво-наперво, следует получить сами правила CSS, расположенные внутри тега <style type="text/css"></style>.

Для этого я создал следующую функцию.

Ruby-модуль css_ssc_module.rb

def ssc_get_style_contents(pattern, text)
  matches = text.scan(pattern)
  str_out = matches.to_s
  return str_out
end

• pattern (regular expression) -- шаблон RegExp по которому будет осуществляться выбор;
• text (String) -- текст страницы, где будет осуществляться поиск и выборка.

Функция вернет текст, внутри элемента <style type="text/css"></style>.

Почему я не описал pattern внутри самой функции? Это регулярное выражение нам еще раз понадобится при подстановке сгенерированного CSS обратно на страницу. Правильнее будет ее определить только в одном месте.

Следующая функция выполнит следующие операции:

1. Выберет все пары значений [variableName, variableValue] внутри блока @server constants {}
2. Заменит в тексте CSS переменные $variableName их значениями variableValue;
3. Удалит блок @server constants {}.

Ruby-модуль css_ssc_module.rb

def ssc_process_server_variables(css)
  pattern = /@server\s+(?:variables|constants)\s*\{\s*([^\}]+)\s*\}\s*/i
  pattern2 = /([^:\}\s]+)\s*:\s*([^;\}]+);/
  str_out = css
  if ( matches = css.scan(pattern) )
    matches.each do |match|
      vars = match[0].scan(pattern2)
      vars.each{|var, value| css.gsub!("$#{var}", value)}
    end
    css = css.gsub!(pattern, '')
    str_out = css unless css.nil?
  end
  return str_out
end

• css (String) -- текст CSS.

Функция возвращает обработанный CSS.

Последняя функция объединяет две предыдущих. На вход получает «сырой» текст шаблона (страницы) и возвращает шаблон с обработанным CSS.

Ruby-модуль css_ssc_module.rb

def ssc_serve_styles(text)
  pattern =  /^\<style\ \b[^>]*>((\s|.)+?)\<\/style\>/i
  css = ssc_get_style_contents(pattern, text)
  css_out = ssc_process_server_variables(css)
  text.gsub!(pattern, "<style type='text/css'>#{css_out}</style>")
  return text
end

• text (String) -- «сырой» текст страницы.

В результате обработки шаблона с переменными CSS функцией ssc_serve_styles(text), получим следующий код HTML.

Пример: обработанный HTML

<style type="text/css">
body {
  font: 11px/1.5em Arial, Helvetica, sans-serif;
  background-color: #FFF;
  color: #000;
}
</style>

CSS variables using Ruby onRails by JCDen is licensed under a Creative Commons Attribution 3.0 Unported License.