6

CSS にコンテンツが含まれていないことはわかっていますが、Twitter Bootstrap のドキュメント 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 は必要ありません。ミックスインをクラスに簡単に含めることができますが、渡す代わりに渡す"Observation"必要がありますt 'box.observation'。

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

Rails は構成より規約に従うことになっています。静的な CSS/LESS/SCSS を追加するのは非常に簡単で、単一の縮小された CSS のすべてのページに既に含まれています。国際化された CSS の規則は何ですか? たとえば、どこに.observation?のような宣言を配置することになっています。

4

2 に答える 2

2

この回答で提案されているように、ロケールごとに 1 つの CSS を生成できますが、CSS は I18n ビットを除いて同じであるため、次のいずれかになります。

  1. ロケールがインライン化された多数の静的 CSS/LESS を含むフォルダー。

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

  2. まったく同じ動的 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

アプリ/コントローラー/css_controller.rb

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

アプリ/ビュー/css/index.css.less.erb

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

アプリ/アセット/スタイルシート/mixins.less

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

この例は単純な ERB ビューであるかのように機能しますが、Less を使用しているため、Rails 4 の時点で ERB と LESS を手動で解析する必要があります。

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
于 2013-04-27T00:00:54.613 に答える
2

ロケールごとに新しい CSS ファイルを生成する必要はありません。CSS が Web サイトのテキスト コンテンツを気にするのはなぜですか?

あなたの最善の策は、データ属性を使用して値を取得することだと思います...

<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
于 2013-05-01T16:14:43.947 に答える