How do I create dynamic CSS in Rails?

2019-02-01 14:08发布

站内问答 / HTML/CSS
514 5 5

what is the best/most efficient way of creating dynamic CSS with Rails. I am developing an admin area on a site, where I would like a user to be able to customize the style of their profiles(Colour mostly), which will also be saved.

Would you just embed ruby script in the css file? Would you need to change the file extension from css?

Thanks.

5条回答
何必那么认真
2楼-- · 2019-02-01 14:41

You can use ERB with CSS, you just need to render css in the controller. However, for such a heavily requested resource, I do not recommend generating this every time. I would store the users stylesheet in memcached or redis, and recall from it when the page loads, rather than rerendering the file each time. When they update their style, you can expire the cache, just make sure it gets rebuilt when the page renders.

查看更多
0人赞 添加讨论(0) 举报
欢心
3楼-- · 2019-02-01 14:48

Currently there is a lot of options to generate dynamic css in rails.

You can use less css - is an extension to CSS with extra features.

Gem Less css for rails provides integration for Rails projects using the Less stylesheet language in the asset pipeline.

If you are using twitter bootstrap you may check this out less rails bootstrap.

Also you can use one more CSS extension language Sass for generating CSS. Here is a Saas rails gem.

Check out Dynamic CSS in Rails and Render Rails assets to string blog posts and article about Asset Pipeline

Related SO questions:

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
4楼-- · 2019-02-01 14:50

In Rails 3.1, you can have your stylesheets pre-processed by erb.

Now let's say you have some dynamic styling called dynamic.css.scss.erb (the .erb at the end is important!) in app/assets/stylesheets. It will be processed by erb (and then by Sass), and as such can contain stuff like

.some_container {
    <% favorite_tags do |tag, color| %>
    .tag.<%= tag %=> {
        background-color: #<%= color %>;
    }
    <% end %>
}

You can include it like any stylesheet.

How dynamic should it be?

Note that it will be only processed once, though, so if the values changes, the stylesheet won't.

I don't think there is a super efficient way to do have it completely dynamic yet, but it is still possible to generate the CSS for all requests. With this caveat in mind, here's a helper for that in 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

Here's how to use it:

First, copy the above helper in app/helpers/application_helper.rb.

You can then include it in your page as follows:

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

Make sure that your layout uses the content :head. For example, your layout/application.html.erb could look like:

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

I found this out thanks to this post.

查看更多
0人赞 添加讨论(0) 举报
傲
5楼-- · 2019-02-01 14:57

I just built this for another site. I have a controller action and a view that pulls color values out of the database, then renders a customized CSS based on the current user's account. To optimize, I am using the built in Rails page caching, which stores a copy on disk and serves it as a static asset. Nice and fast.

Here's an example from the ERB code

#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;}
查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
6楼-- · 2019-02-01 15:03

This solution defines some constants in config/site_settings.rb, which can then be used throughout the Rails application, as well as for automatically generating the CSS files whenever the Rails app starts and the CSS input files have been modified..

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)