Mat*_*att 9 css dynamic-css ruby-on-rails
使用Rails创建动态CSS的最佳/最有效方法是什么?我正在网站上开发一个管理区域,我希望用户能够自定义其配置文件的样式(主要是颜色),这也将被保存.
你会在rubss脚本中嵌入css文件吗?你需要从css更改文件扩展名吗?
谢谢.
Mar*_*une 21
在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 %>
}
Run Code Online (Sandbox Code Playgroud)
您可以像任何样式表一样包含它.
请注意,它只会被处理一次,所以如果值发生变化,样式表就不会.
我不认为有一种超级有效的方法可以让它完全动态,但仍然可以为所有请求生成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
Run Code Online (Sandbox Code Playgroud)
以下是如何使用它:
首先,复制上面的帮助器app/helpers/application_helper.rb.
然后,您可以将其包含在页面中,如下所示:
<% content_for :head do %>
<%= style_tag "dynamic.css" %>
<% end %>
The rest of your page.
Run Code Online (Sandbox Code Playgroud)
确保您的布局使用内容:head.例如,您layout/application.html.erb可能看起来像:
...
<HEAD>
....
<%= yield :head %>
</HEAD>
...
Run Code Online (Sandbox Code Playgroud)
我发现这一点归功于这篇文章.
目前有很多选项可以在 Rails 中生成动态 CSS。
你可以使用less css - 是 CSS 的扩展,具有额外的功能。
Gem Less css for Rails在资产管道中使用 Less 样式表语言为 Rails 项目提供集成。
如果您使用 twitter bootstrap,您可以查看lessrails bootstrap。
您还可以使用另一种 CSS 扩展语言Sass来生成 CSS。这是Saas Rails 的瑰宝。
查看Rails 中的动态 CSS和渲染 Rails 资源以串接有关资源管道的博客文章和文章
相关SO问题:
| 归档时间: |
|
| 查看次数: |
13356 次 |
| 最近记录: |