Jaka jest konwencja w Railsach (z potokiem aktywów) do internacjonalizacji wewnątrz CSS?

Question

wiem CSS nie ma mieć treść, ale tak, jak tego ładnym pudełku (poniżej) extracted z Twitter Bootstrap dokumentacji CSS:

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

I nie obchodzi „Przykład”, używam czegoś takiego jak wstawek:

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

Wtedy nie trzeba naprawdę dynamiczny CSS, mogę łatwo zawierają wstawek w klasie, ale zamiast przechodzenia "Observation" muszę przechodzić t 'box.observation':

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

Rails ma przestrzegać konwencji nad konfiguracją, to jest bardzo łatwe do wystarczy dodać statyczny CSS/LESS/SCSS i to jest już zawarte we wszystkich stron w jednym minified CSS . Jaka jest konwencja dotycząca umiędzynarodowionego CSS? Na przykład, gdzie mam umieścić deklaracje podobne do tego z .observation?

Answer 1

Nie trzeba wygenerować nowy plik CSS dla każdego locale - graniczący z szaleństwem. Dlaczego Twój CSS dba o zawartość tekstową twojej strony?

Myślę, że najlepiej będzie użyć atrybutu danych, aby pobrać wartość ...

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

A potem w CSS:

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

Można prawdopodobnie znaleźć sposób, aby wyodrębnić to pod częściową (lub pomocnika), tak, że plik erb kończy się tak:

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

i sposób pomocnik:

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

Answer 2

mogę wygenerować jeden CSS za lokum jak zasugerowano w this answer, ale ponieważ CSS jest taka sama, z wyjątkiem bitów i18n, musiałbym albo od:

1. folder z mnóstwa CSS statycznej/LESS z lokalizacji włączonych, np

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

2. Partie identyczne dynamiczny CSS'S, np

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

Zamiast wybrać, aby utworzyć CSS i ERB widok i dostarczyć za pomocą za pomocą strony buforowanie z kodu lokalizacji w adresie URL, w ten sposób nie ma dublowania. Zobacz kod poniżej.

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 

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; 
    } 
} 

Ten przykład będzie działać tak jak gdyby był to simple ERB view, ale ponieważ używa mniej, muszę analizować ERB i mniej ręcznie szyn 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