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，我可以轻松地将 mixin 包含在一个类中，但是"Observation"我需要传递而不是传递t 'box.observation'：

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

Rails 应该遵循约定优于配置，只需添加静态 CSS/LESS/SCSS 非常容易，并且它已经包含在单个缩小 CSS 中的所有页面中。国际化 CSS 的约定是什么？例如，我应该在哪里放置类似的声明.observation？

4

2 回答 2

2

我可以按照这个答案中的建议为每个语言环境生成一个 CSS ，但由于 CSS 是相同的，除了 I18n 位，我将有以下任何一个：

  1. 一个包含大量静态 CSS/LESS 并内联语言环境的文件夹，例如：

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

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

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

相反，我选择创建 CSS 和 ERB 视图并使用页面缓存和 URL 中的语言环境代码进行交付，这样就没有重复。请参阅下面的代码。

配置/路由.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 关心你网站的文本内容？

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

<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 回答