пятница, 23 января 2009 г.

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>


0 Комментариев :

Отправить комментарий

Жги!