用于CSS内部国际化的Rails(带有资产管道)的约定是什么？

Question

我知道CSS不应该有内容,但确实如此,就像从Twitter Bootstrap文档CSS中提取的这个好框(下面):

盒子屏幕截图

/* Echo out a label for the example */
.bs-docs-example:after {
  content: "Example";
}

我不关心"示例",我使用类似的东西作为mixin:

.box (@legend) {
  /* Echo out a label for the example */
  &:after {
    content: @legend;
  }
}

然后我不需要真正的动态CSS,我可以轻松地将mixin包含在一个类中,但不是传递"Observation"我需要传递t 'box.observation':

.observation {
  .box("<%= t 'box.observation' =>");
}

Rails应该遵循Conventions over Configuration,只需添加静态CSS/LESS/SCSS就很容易了,它已经包含在一个缩小的CSS中的所有页面中.国际化CSS的惯例是什么？例如,我应该把声明放在.observation哪里？

Answer 1

您不需要为每个语言环境生成一个新的 CSS 文件 - 这近乎疯狂。为什么你的 CSS 关心你网站的文本内容？

我认为你最好的选择是使用数据属性来获取价值......

<div class='bs-docs-example' data-before-content='<%= t.css_example %>'>
  <!-- html here -->
</div>

然后在你的CSS中：

.bs-docs-example:after {
  content: attr(data-before-content);
}

您可能会找到一种方法将其提取到部分（或帮助程序）中，以便您的 erb 文件最终像这样：

<%= docs_example do %>
  <!-- html here -->
<% end %>

还有一个辅助方法：

def docs_example
  content_tag(:div, class: "bs-docs-example", "data-before-content" => t.css_example) do
    yield
  end
end