Question

我想使用Tilt中的SASS和Rails 4来生成动态CSS。

我们说我有以下css.sass模板：

$class_name: test
$width: 329 
$height: 425 

.view-#{$class_name}

  width: #{$width}px
  height: #{$height}px

我需要master.css.sass.erb（我不确定格式）我将使用不同的参数多次渲染我的模板。
在application.css中，我将会有类似这样的内容
```
*= require master.css.sass.erb
```

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

这就是我现在所拥有的：

模板test.css.sass.erb：

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

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时，它只输出＆lt;％= code％＆gt;中包含的ruby代码。包装。您当前的代码可能正常运行（我不熟悉Tilt或直接SASS），但您没有告诉它将结果输出到sass文件。将master.css.sass.erb的第一行从<%更改为<%=，然后您可以从那里进行调试。

话虽如此，我建议反对这个过程。每次调用时，你都会浪费资源来编译样式表。

另一种方法是保持样式表的静态，就像在开头示例中一样，这样就可以对它们进行预编译和缓存，然后使用stock html和css创建类似layouts/_conditional_styles.html.erb的部分：

<% 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

假设颜色变量是红色的，那么过程就是这样的......首先你的应用程序将使用它的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＆gt;编译它sass＆gt; CSS
2. 每次请求都必须提供50kB的文件。
预编译资产被布局html中嵌入的条件样式覆盖，如我的第一个答案中所述：
1. 您的编译成本几乎为零，因为样式表已预先编译，因此无需执行任何操作，并且包含条件样式的whatever.html.erb模板已由您的erb编译器编译，因此您'只是添加渲染变量的工作。
2. 您只需提供预编译的样式表，这意味着您只需使用渲染的相关样式所需的字节，即可在每个请求中节省约50kB的带宽。

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

使用模板生成动态CSS

1 个答案: