如何在Rails中创建动态CSS?

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

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

谢谢。

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

你可以使用更少的css – 是具有额外function的CSS的扩展。

Gem Less css for rails使用资产管道中的Less stylesheet语言为Rails项目提供集成。

如果你使用的是twitter bootstrap,你可以查看更少的rails bootstrap 。

您还可以使用一个CSS扩展语言Sass来生成CSS。 这是一个萨斯铁轨gem 。

查看Rails和Render Rails资源中的 Dynamic CSS 到字符串博客post和有关Asset Pipeline的文章

相关的SO问题:

  • 在rails应用程序中处理动态css的最佳方法
  • Rails资产管道中的动态CSS,即时编译
  • Rails:动态更改CSS属性?

在Rails 3.1中,您可以使用erb预处理样式表。

现在让我们假设您在app/assets/stylesheets有一些名为.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复制上面的帮助app/helpers/application_helper.rb

然后,您可以将其包含在页面中,如下所示:

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

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

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

我发现这一点归功于这篇文章 。

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

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

这是ERB代码的一个例子

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

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

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