应该有多动态？

Question

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

您是否只是在css文件中嵌入了ruby脚本？你需要从css更改文件扩展名吗？

感谢。

Answer 1

在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>
...

我发现这一点归功于this post。

Answer 2

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

Answer 3

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

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

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

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

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

查看Dynamic CSS in Rails和Render Rails assets to string博文以及有关Asset Pipeline的文章

相关的SO问题：

Answer 4

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

Answer 5

此解决方案在config / site_settings.rb中定义了一些常量，然后可以在整个Rails应用程序中使用，以及每当Rails应用程序启动并且CSS输入文件已被修改时自动生成CSS文件。< / p>

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

Answer 6

这些年来已经有了很多发展，我最近想出了如何解决这个问题所要问的问题。既然已经有人回答了大约9-10年，我想我会投入2美分。

正如其他人所说，将红宝石代码直接放入CSS文件中并不是一种好习惯，因此无法完成，因为CSS是预编译的，并且无法在文件中动态更改...。但是，它可以在文件外部动态更改！

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

CSS在其编码语言中使用了变量，以使一次更改许多元素变得更加容易。您可以将这些变量放在root部分的CSS文件顶部。像这样：

: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和其仪表板的视图并使其保持不变（因为值保存在其配置文件中）。 / p>

我希望这对将来的开发人员有所帮助。

快乐编码！

如何在Rails中创建动态CSS？

6 个答案:

应该有多动态？