在Rails（使用资产管道）中，CSS内部国际化的惯例是什么？

我知道CSS不应该包含内容，但它确实包含内容，就像Twitter引导文档CSS中的这个漂亮的框（如下所示）：

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

我不喜欢“示例”，我使用类似的东西作为混音：

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

然后我不需要真正的动态CSS，我可以很容易地在类中包含mixin，但是我需要传递

观察值
t'box.Observation'
：

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

。观察{
.方框（“”）；
}

Rails应该遵循约定而不是配置，只需添加一个静态CSS/LESS/SCSS就非常容易了，而且它已经包含在单个缩小的CSS中的所有页面中。国际化CSS的惯例是什么？例如，在我应该放置类似于
.observation
？
的声明的地方，我可以按照中的建议为每个语言环境生成一个CSS，但是由于CSS除了I18n位之外是相同的，所以我可以使用以下任一项：

包含大量静态CSS/LESS且区域设置已内联的文件夹，例如：

/* en */
.observation {
  .box("Observation");
}


许多完全相同的动态CSS，例如

/* en */
html[lang=en] {
  .observation {
    .box("Observation")
  }
}


相反，我选择创建一个CSS和ERB视图，并使用页面缓存和URL中的区域设置代码进行交付，这样就不会有重复。请参阅下面的代码

config/routes.rb

X::Application.routes.draw do
  get 'index.:locale.:format' => 'css#index',
    constraints: { locale: /[a-z]{2}(-[A-Z]{2})?/,
                   format: 'css' }
end

app/controllers/css_controller.rb

class CssController < ActionController::Base
  caches_page :index
  def index
    @locale = params[:locale]
  end
end

本例的工作原理与a相同，但由于使用较少，因此我必须从rails 4开始较少手动解析ERB：

class CssController < ActionController::Base
  caches_page :index

  def index
    @locale = params[:locale]
    erb_source  = find_template.source
    less_source = Tilt::ERBTemplate.new { erb_source }.render(self)
    css_source  = Less::Parser.new(paths: Rails.application.config.less.paths).parse(less_source).to_css
    render text: css_source
  end

  private

  def find_template(_action_name = action_name)
    lookup_context.disable_cache { lookup_context.find_template(_action_name, lookup_context.prefixes) }
  end
end

类csscocontroller

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

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

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

您可能会找到一种方法将其提取到部分（或辅助对象）中，从而使您的erb文件以如下方式结束：

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

---

我相信您的问题将来自这样一个事实：资产被预编译为一个application.css。然而，国际化发生在运行时。因此，您可能必须动态创建CSS才能使其正常工作。CSS的变化与区域设置的变化一样大，我认为在运行时创建它会有点过火，不是吗？我喜欢这里的答案：。您可以提取出特定于CSS文件的CSS语言环境，并在文件名中使用语言缩写。这非常简洁，但对于我的要求来说还不够好。我必须为每个语言环境创建几个更少的/scss文件，并且所有文件都包含完全相同的内容。不过我觉得很接近。如何将区域设置添加到HTML标记中？看这个问题：这太神奇了。你知道“attr”属性有多受支持吗？我相信它与

content

CSS属性本身有着相同的支持：-因此IE 8+、Firefox、Chrome、Safari。我想我把翻译程序的语法搞错了

t.CSS\u示例

，但你已经知道该怎么做了：p

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

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

<%= 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