使用模板生成动态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或straight 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" %>

---

要回答你的问题，为什么你使用更少的资源使用预编译的资产，然后覆盖它们，考虑你的例子test.css.sass.erb

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

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

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

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

body{ background:#ff0000 !important; }

在所有这些之后，它将提供文件。在您的开发环境中，您不会看到太多的性能差异，因为您的应用程序默认为每个请求重新构建资产。当在生产环境中为web提供应用程序时，区别就出现了。

如果您的资产不依赖于应用程序中的变量，则可以预编译样式表。这意味着您的应用程序只编译一次资产，在它编译完资产后，您会得到一个样式表，如test-f25ab2b1286feb7cc98375sac732f7d0.css。

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

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

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

  1. 每次请求都要遍历50kB文件2次才能从erb> sass> css编译

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

• 使用预编译的资源，这些资源被嵌入在布局的html中的条件样式覆盖，正如我在第一个答案中解释的那样:

  1. 你的编译成本下降到几乎为零，因为样式表是预编译的，所以没有什么可做的，你的whatever.html.erb模板包含条件样式已经被你的动词编译器编译，所以你只是添加渲染变量的工作。

  2. 您只提供预编译的样式表一次，这意味着您在每个请求上节省了约50kB的带宽，仅使用渲染依赖样式所需的字节。

希望这对您有所帮助，有关所有这些工作原理的更多信息，我建议您从Asset Pipeline Rails指南开始。