如何在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