Was ist die Konvention in Rails (mit Asset-Pipeline) für die Internationalisierung in CSS?

Question

Ich weiß, CSS ist nicht haben Inhalt soll, aber es funktioniert, wie diese schöne Box (unten) extracted aus der Twitter Bootstrap Dokumentation CSS:

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

Ich interessiere mich nicht für „Beispiel“, ich so etwas wie ein mixin verwenden:

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

Dann brauche ich nicht wirklich dynamische CSS, kann ich schließen leicht die mixin in einer Klasse, aber anstatt vorbei "Observation" Ich brauche t 'box.observation' weitergeben müssen:

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

Rails soll Konventionen über Konfiguration folgen, ist es sehr einfach, nur eine statische CSS/LESS/SCSS hinzufügen und es ist bereits auf allen Seiten in einem einzigen minified CSS enthalten . Was ist die Konvention für internationalisierte CSS? Zum Beispiel, wo soll ich Deklarationen wie die von .observation setzen?

Answer 1

Sie brauchen nicht zu Generiere eine neue CSS-Datei für jedes Gebietsschema - das grenzt an Wahnsinn. Warum interessiert sich Ihr CSS für den Textinhalt Ihrer Website?

Ich denke, Ihre beste Wette wäre, ein Datenattribut zu verwenden, um den Wert zu ergreifen ...

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

Und dann in Ihrem CSS:

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

Sie wahrscheinlich eine Art und Weise zu extrahieren, diese in eine teilweise (oder Helfer), so dass Ihre erb Datei endet wie diese finden könnte:

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

Und eine Hilfsmethode:

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

Answer 2

ich ein CSS pro locale in this answer wie vorgeschlagen erzeugen könnte, aber da die CSS die gleiche, außer durch die I18n Bits ist, würde ich entweder von:

1. Ein Ordner mit einer Vielzahl von statischen CSS/LESS mit den Lokalisierungs inlined, zB:

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

2. Viele genau identisch dynamische CSS ist, zB

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

Statt in der URL mit dem Lokalisierungs-Code Seiten-Caching verwenden, wähle ich eine CSS und ERB-Ansicht zu erstellen und liefere diese Art und Weise gibt es keine Überschneidungen. Siehe Code unten.

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/Controller/css_controller.rb

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

app/views/CSS/index.css.less.erb

@import "mixins"; 
.observation { 
    .box("<%= t 'box.observation', locale: @locale %>"); 
} 

app/assets/stylesheets/mixins.less

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

Dieses Beispiel funktionieren würde, wie wenn es ein simple ERB view ist, aber da es mit weniger, ich habe die ERB zu analysieren und weniger manuell als Schienen 4:

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