15

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

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

谢谢。

4

6 回答 6

24

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

现在假设您dynamic.css.scss.erb在.erb. app/assets/stylesheets它将由 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>
...

由于这篇文章，我发现了这一点。

于 2011-12-08T19:46:52.667 回答
2

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

于 2010-08-24T15:09:21.770 回答
1

多年来有很多发展，我最近想出了如何做这个问题所要求的。自从有人回答这个问题已经有 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 中的所有其他实例会变得更加容易。

Now for the dynamic Ruby part.

In the <head> section of your application file (or in the case of this question the file that holds the template for the admin's dashboard), you will need to redeclare the CSS variables with your dynamic variables and mark them as important. For example, let's say that you allow your user to choose primary and secondary colors for their dashboard and they are stored in the user's profile called like: user.primary_color and user.secondary_color. You will need to add this to your <head> section:

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

This !important tag will override the variables found in the CSS file thus dynamically allowing the user to change the CSS and view of their dashboard and have it remain persistent (as the values are saved in their profile).

I hope that this helps future developers.

Happy Coding!

于 2020-08-09T06:50:11.903 回答
0

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

你可以使用更少的 CSS - 是对 CSS 的扩展，具有额外的功能。

用于 rails 的Gem Less css使用资产管道中的 Less 样式表语言为 Rails 项目提供集成。

如果您使用的是 twitter bootstrap，您可以查看less rails bootstrap。

你也可以使用另一种 CSS 扩展语言Sass来生成 CSS。这是一个Saas rails gem。

查看Rails 中的Dynamic CSS和Render Rails assets 以字符串化博客文章和关于Asset Pipeline的文章

相关SO问题：

于 2010-08-24T13:46:29.127 回答
0

我刚刚为另一个站点构建了这个。我有一个控制器操作和一个从数据库中提取颜色值的视图，然后根据当前用户的帐户呈现自定义的 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;}
于 2010-08-24T17:18:10.577 回答
-1

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

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

于 2011-04-09T08:30:36.443 回答