【问题标题】：How do I create dynamic CSS in Rails?如何在 Rails 中创建动态 CSS？
【发布时间】：2010-08-24 13:29:38
【问题描述】：

使用 Rails 创建动态 CSS 的最佳/最有效方式是什么。我正在网站上开发一个管理区域，我希望用户能够自定义他们的个人资料的样式（主要是颜色），这也将被保存。

你会在 css 文件中嵌入 ruby 脚本吗？是否需要更改 css 的文件扩展名？

谢谢。

【问题讨论】：

【解决方案1】：

在 Rails 3.1 中，您可以让 erb 对样式表进行预处理。

现在假设您在app/assets/stylesheets 中有一些名为dynamic.css.scss.erb 的动态样式（末尾的.erb 很重要！）。它将由 erb（然后由 Sass）处理，因此可以包含类似

.some_container {
    <% favorite_tags do |tag, color| %>
    .tag.<%= tag %=> {
        background-color: #<%= color %>;
    }
    <% end %>
}

您可以像任何样式表一样包含它。

它应该有多动态？

请注意，它只会被处理一次，所以如果值发生变化，样式表不会。

我认为目前还没有一种超级有效的方法可以让它完全动态化，但仍然可以为所有请求生成 CSS。考虑到这一点，以下是 Rails 3.1 中的帮助程序：

  def style_tag(stylesheet)
    asset = YourApplication::Application.assets[stylesheet]
    clone = asset.class.new(asset.environment, asset.logical_path, asset.pathname, {})
    content_tag("STYLE", clone.body.html_safe, type:"text/css")
  end

使用方法如下：

首先，将上述助手复制到app/helpers/application_helper.rb。

然后您可以将其包含在您的页面中，如下所示：

<% content_for :head do %>
  <%= style_tag "dynamic.css" %>
<% end %>
The rest of your page.

确保您的布局使用内容:head。例如，您的 layout/application.html.erb 可能如下所示：

...
<HEAD>
  ....
  <%= yield :head %>
</HEAD>
...

感谢this post，我发现了这一点。

【讨论】：

【解决方案2】：

您可以将 ERB 与 CSS 一起使用，您只需在控制器中渲染 css。但是，对于这样一个请求量很大的资源，我不建议每次都生成它。我会将用户样式表存储在 memcached 或 redis 中，并在页面加载时从中调用，而不是每次都重新呈现文件。当他们更新样式时，您可以使缓存过期，只需确保在页面呈现时重建它即可。

【讨论】：

前轨 3.2：stackoverflow.com/questions/4729282/…

【解决方案3】：

这些年来已经有了很大的发展，我最近想出了如何去做这个问题所问的问题。自从有人回答这个问题已经有 9 到 10 年了，我想我会投入 2 美分。

正如其他人所说，将 ruby 代码直接放入 CSS 文件中并不是一个好习惯，因此无法做到，因为 CSS 是预编译的，并且无法在文件中动态更改....但是，它可以在文件之外动态更改！

我需要简要介绍一下 CSS 变量，以防将来的读者不知道如何使用它们。

CSS 在其编码语言中使用了变量，以便更轻松地一次更改大量元素。您将这些变量放在 CSS 文件顶部的 root 部分中。像这样：

:root {
    --primary: #0061f2;
    --secondary: #6900c7;
}

现在，只要您想为元素设置其中一种颜色的样式，您只需像这样输入var(--variableName)：

.btn{
   color: var(--secondary);
   background-color: var(--primary);
}

.h1 {
   color: var(--primary);
}

您可以看到更改 root 部分中的变量并因此更改 CSS 中的所有其他实例会变得更加容易。

现在是动态 Ruby 部分。

在您的应用程序文件的<head> 部分（或者在这个问题的情况下，保存管理员仪表板模板的文件），您需要用您的动态变量重新声明 CSS 变量并将它们标记为重要.例如，假设您允许您的用户为其仪表板选择主要颜色和次要颜色，并且它们存储在用户的配置文件中，称为：user.primary_color 和 user.secondary_color。您需要将此添加到您的 <head> 部分：

<style>
  :root{
    --primary: <%= user.primary_color %> !important;
    --secondary: <%= user.secondary_color %> !important;
  }
</style>

!important 标记将覆盖 CSS 文件中的变量，从而动态地允许用户更改 CSS 和仪表板视图并使其保持不变（因为值保存在他们的配置文件中）。

我希望这对未来的开发者有所帮助。

编码愉快！

【讨论】：

非常有帮助，但是您知道有什么方法可以使用这种相同的方法，而且还可以与 SASS 一起使用吗？例如，我想做lighten(var(--foo), 20%);，但这是不可能的。有什么想法吗？

【解决方案4】：

目前有很多选项可以在 rails 中生成动态 css。

您可以使用less css - 是对 CSS 的扩展，具有额外的功能。

Gem Less css for rails 使用 asset pipeline 中的 Less 样式表语言为 Rails 项目提供集成。

如果您使用 twitter 引导程序，您可以查看 less rails bootstrap。

您还可以使用另外一种 CSS 扩展语言 Sass 来生成 CSS。这是Saas rails gem。

查看Dynamic CSS in Rails 和Render Rails assets to string 博客文章和关于Asset Pipeline 的文章

相关SO问题：

【讨论】：

请注意，如果您的 less 文件中有任何依赖于数据库的逻辑，它不会部署到 Heroku。

【解决方案5】：

我刚刚为另一个网站构建了这个。我有一个控制器操作和一个从数据库中提取颜色值的视图，然后根据当前用户的帐户呈现自定义的 CSS。为了进行优化，我使用了内置的 Rails 页面缓存，它将副本存储在磁盘上并将其用作静态资产。又好又快。

这是一个来自 ERB 代码的示例

#header { background: <%= @colors["Header Stripe Background"] %>; border: 1px solid <%= @colors["Header Stripe Border"] %>; }
#header h1 {color: <%= @colors["Headline Color"] %>; }
#header p a { background: <%= @colors["Control Link Background"] %>; color: <%= @colors["Control Links"] %>;}
#header p a:hover {background: <%= @colors["Control Link Hover"] %>; text-decoration:underline;}

【讨论】：

【解决方案6】：

此解决方案在 config/site_settings.rb 中定义了一些常量，然后可以在整个 Rails 应用程序中使用这些常量，以及在 Rails 应用程序启动和修改 CSS 输入文件时自动生成 CSS 文件..

http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html

【讨论】：

链接好像失效了。说明通常应直接写入 SO 答案以避免这种情况。