ruby - 使用模板生成动态 CSS

Question

我想在 Rails 4 中使用模板和 Tilt 和 SASS 生成动态 CSS。

1. 假设我有以下 css.sass 模板:

   $class_name: test
   $width: 329 
   $height: 425 
   
   .view-#{$class_name}
   
     width: #{$width}px
     height: #{$height}px
   

2. 我需要 master.css.sass.erb(我不确定格式)，我将在其中使用不同的参数多次渲染我的模板。

3. 在 application.css 中，我将有这样的东西

   *= require master.css.sass.erb
   

每次我使用具有不同参数的模板时，我都会在我的 master.css.sass.erb 文件中添加一行。我不知道如何使用 Tilt 将参数传递给 css.sass 模板。任何人都可以协助并判断这是否可能吗？

---

这是我目前所拥有的:

1. 模板test.css.sass.erb:

   $color: <%= color %>
   body
     background: #{$color} !important
   

2. master.css.sass.erb 文件:

   <%
       require 'erb'
       config_path = File.expand_path("../test.css.sass.erb", __FILE__)
       template = Tilt.new(config_path)
       template.render(self, :color => 'yellow')
   
   %> .thisisrendered
       color: red
   

请注意，这两个文件在一个文件夹中。问题是只有以下 css 被重新引用:

.thisisrendered
    color: red

Answer 1

回答您的问题:编译 erb 时，它只输出包含在 <%= code %> 包装器中的 ruby​​ 代码。您当前的代码可能运行良好(我不熟悉 Tilt 或直接 SASS)，但您没有告诉它将结果输出到 sass 文件。更改第一行master.css.sass.erb来自 <%至 <%=然后您可以从那里进行调试。

话虽这么说，但我不建议采用此流程。每次调用时，您都将浪费资源来编译样式表。

另一种方法是像您开始的示例中那样保持样式表静态，以便它们可以预编译和缓存，然后创建一个像 layouts/_conditional_styles.html.erb 这样的部分。使用 stock html 和 css，例如:

<% unless @your_sanitized_style_object.nil? %>
  <style>
    body{
      background: <%= @your_sanitized_style_object.background_color.html_safe %> !important;
    }
  </style>
<% end %>

它可以通过在您的 layouts/application.html.erb 中的应用程序 css 文件之后呈现来覆盖应用程序样式表。文件如:

<%= stylesheet_link_tag "application" %>
<%= render "layouts/conditional_styles" %>

---

要回答您为什么使用预编译 Assets 使用较少资源然后覆盖它们的问题，请考虑您的示例 test.css.sass.erb

$color: <%= color %>
body
  background:$color !imporant

假设颜色变量是红色的，过程会像这样......首先你的应用程序将使用它的 erb 编译器运行它并给你一个 test.css.sass文件如:

$color: #ff0000
body
  background:$color !important

然后您的应用程序将使用其 sass 编译器再次运行代码，为您提供 test.css文件如:

body{ background:#ff0000 !important; }

所有这些之后，它将提供文件。在您的开发环境中，您不会看到太大的性能差异，因为您的应用程序默认为每个请求重建 Assets 。当需要在生产环境中将您的应用程序提供给 Web 时，区别就来了。

如果您的 Assets 不依赖于应用程序中的变量，则可以预编译样式表。这意味着您的应用程序编译 Assets 一次，编译 Assets 后您将获得类似 test-f25ab2b1286feb7cc98375sac732f7d0.css 的样式表。 .

样式表将是相同的，但唯一的是 Rails 在预编译某些内容时在文件名末尾抛出的所有行话。该术语称为指纹，其目的是根据传入请求告诉服务器是否有文件的更新版本。如果文件没有被修改，并且发出请求的系统已经将该文件下载到它的缓存中，那么您的浏览器将使用缓存的版本，而不是重新下载样式表。

现在假设您的 test.css.sass.erb例如，文件很大，例如 50kB。

• 如果没有预编译，您的资源成本是:

  1. 必须在每次请求时遍历 50kB 文件 2 次才能从 erb > sass > css 编译它

  2. 必须为每个请求提供 50kB 的文件。

• 预编译 Assets 被嵌入在布局 html 中的条件样式覆盖，如我的第一个答案中所述:

  1. 您的编译成本几乎降为零，因为样式表是预编译的，因此无需对其进行任何操作，您的 whatever.html.erb包含条件样式的模板已由您的 erb 编译器编译，因此您只需添加呈现变量的工作。

  2. 您只需提供一次预编译样式表，这意味着您可以在每次请求时节省约 50kB 的带宽，并且仅使用呈现的依赖样式所需的字节。

希望这会有所帮助，有关所有这些工作原理的更多信息，我建议从 Asset Pipeline Rails Guide 开始.