Переменные CSS с использованием XSLT

Недавно озадачился введением в пользовательские шаблоны переменных CSS. Для чего нужны CSS-переменные? Да чтобы пользователь мог задать фирменные цвета, шрифты для своего шаблона и хранить их в одном, определенном месте (как бы это ни звучало). Чтобы впоследствии, если ему захочется что-то изменить, он мог перезадать их там же, а не рыскать по всему файлу CSS. Примерно так сделано в настройках Blogger, в разделе Макет - Шрифты и цвета.

Вот, пожалуй, самый тривиальный способ задания переменных CSS с использованием XSLT. В-частности xsl:variable. Для HTML этот способ не подходит.

Внутри HTML элемента head шаблона определите переменные и стили.

<!-- CSS Variables -->
<xsl:variable name="consoleEntityColor" select="'#B00080'" />
<xsl:variable name="consoleStringColor" select="'#7F007F'" />
<xsl:variable name="consoleKeywordColor" select="'#00007F'" />
<xsl:variable name="consoleActionColor" select="'#007F7F'" />
<xsl:variable name="consoleParamColor" select="'#C0A030'" />
<xsl:variable name="consoleCommentColor" select="'#007F00'" />
<xsl:variable name="consoleFont" select="'font-family: Courier New, Courier, monospace; font-size: 10pt'" />
<!-- Additional CSS -->
<style type="text/css">
.console {
  width:300px; height:200px; border:1px solid <xsl:value-of select="$consoleActionColor"/>;
  overflow:auto;
  <xsl:value-of select="$consoleFont"/>;
}
.console .entity {
  color: <xsl:value-of select="$consoleEntityColor"/>;
}
.console .string {
  color: <xsl:value-of select="$consoleStringColor"/>;
}
.console .keyword {
  color: <xsl:value-of select="$consoleKeywordColor"/>;
}
.console .action {
  color: <xsl:value-of select="$consoleActionColor"/>;
}
.console .param {
  color: <xsl:value-of select="$consoleParamColor"/>;
}
.console .comment {
  color: <xsl:value-of select="$consoleCommentColor"/>;
}
</style>

Выведите HTML с использованием полученных стилей CSS:

<pre class="console">
  <span class="comment"># Store home</span><br />
  <span class="keyword">def</span> <span class="action">index</span><br />
    <span class="entity">@store</span> = Store.find(params[<span class="param">:id</span>])<br />
    <span class="entity">@title</span> = <span class="string">"Home - #{@store.name}"</span><br />
  <span class="keyword">end</span>
</pre>

Выглядеть будет примерно так:

# Store home
def index
@store = Store.find(params[:id])
@title = "Home - #{@store.name}"
end