What is the convention in Rails (with asset pipeline) for internationalization inside CSS?

asset-pipeline, css, ruby-on-rails, twitter-bootstrap

Solution

You don't need to generate a new CSS file for each locale - that borders on madness. Why does your CSS care about the text content of your website?

I think your best bet would be to use a data-attribute to grab the value...

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

And then in your css:

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

You could probably find a way to extract this into a partial (or helper), so that your erb file ends up like this:

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

And a helper method:

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

Problem

I know CSS isn't supposed to have content, but it does, like this nice box (below) extracted from the Twitter Bootstrap documentation CSS: ``` /* Echo out a label for the example */ .bs-docs-example:after { content: "Example"; } ``` I don't care for "Example", I use something like that as a mixin: ``` .box (@legend) { /* Echo out a label for the example */ &:after { content: @legend; } } ``` Then I don't need really dynamic CSS, I can easily include the mixin in a class, but instead of passing `"Observation"` I need to pass `t 'box.observation'`: ``` .observation { .box("<%= t 'box.observation' =>"); } ``` Rails is supposed to follow Conventions over Configuration, it is very easy to just add a static CSS/LESS/SCSS and it is already included in all pages in a single minified CSS. What is the convention for internationalized CSS? For example, where I am supposed to put declarations like that of `.observation`?

Original source

Related problems