2

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

  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
4

1 回答 1

3

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

话虽如此，我建议不要使用此过程。每次调用样式表时，您都会浪费资源来编译样式表。

另一种方法是像在你的开篇示例中一样保持你的样式表是静态的，这样它们就可以被预编译和缓存，然后创建一个像layouts/_conditional_styles.html.erb使用股票 html 和 css 这样的部分：

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

这可以通过在文件中的应用程序 css 文件之后呈现来覆盖应用程序样式表，layouts/application.html.erb例如：

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

要回答您关于为什么使用预编译资产使用较少资源然后覆盖它们的问题，请考虑您的示例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; }

毕竟，它将提供文件。在您的开发环境中，您不会看到太大的性能差异，因为您的应用程序默认为每个请求重建资产。当您需要在生产环境中将应用程序提供给 Web 时，差异就出现了。

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

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

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

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

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

    2. 每次请求都必须提供 50kB 的文件。

  • 如我的第一个答案中所述，使用嵌入在布局的 html 中的条件样式覆盖的预编译资产：

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

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

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

于 2014-05-04T17:31:24.043 回答