如何在Rails中创建动态CSS?

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)

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


Kun*_*vič 0

目前有很多选项可以在 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问题: