在 ruby on rails 中使用变量设置 css 样式答案

【问题标题】：set css styles with variables in ruby on rails在 ruby on rails 中使用变量设置 css 样式
【发布时间】：2014-08-04 06:50:53
【问题描述】：

我尝试这样做：final result。为此，我在第一张上放了另一张图片（这张：cover）。对于边框颜色，我创建了一个类“parallelogram”。

HTML 文件：

<%= image_tag(project.projectpicture.url(:slider), :class => "image") %>
<%= image_tag(("/assets/coverslider.png"), :class => "cover") %>
<div class="parallelogram" style="background: red;"></div>

CSS 文件：

.image
 {
    position: relative;
 }

 .cover
 {
    position: absolute;
    z-index: 1;
    top: 0;
    left:0;
 }

 .parallelogram
 {
    position: absolute;
    z-index: 1;
    top: 0;
    left:227px;
    opacity: 0.5;
    width:10px; 
    height:200px; 
    transform: skew(20deg); 
    -webkit-transform: skew(20deg);
  }

所有这些都有效。我不知道这是否是最好的解决方案，我对每一个更好的解决方案都持开放态度。

现在我想有可能改变平行四边形的颜色。为此我尝试了：

<div class="parallelogram" style="background: #{project.color};"></div>

其中 project.color 是项目颜色。这行不通。 Rails 生成这个 html 代码：

<img class="image" src="/system/projects/projectpictures/0..." alt="15"></img>
<img class="cover" src="/assets/coverslider.png" alt="Coverslider"></img>
<div class="parallelogram" style="background: #{project.color};"></div>

我不知道为什么#{project.color}没有设置颜色并保持这样。

感谢您的帮助。我开始了，所以如果你有更好的解决方案，我很乐意学习。

【问题讨论】：

您的projects 表中有color 属性吗？
是的。当我执行以下操作时：<%= link_to project.name, project_path(project), style: "background: #{project.color};" %> Rails 生成好的代码：<a style="background: #FF004F" href="http://localhost:3000/projects/21"></a> 并将#{project.color} 转换为#FF004F。我不知道为什么 Rails 对 <div> 不这样做。

标签： css ruby-on-rails-4

【解决方案1】：

我不知道为什么 Rails 对 <div> 不这样做

因为div标签属于HTML而不是Rails。你不能只在HTML div中给出#{project.color}。

解决方案

Rails 有一个div_for 标签，试试吧。

有关详细信息，请参阅此API

或

尝试使用 content_tag

【讨论】：

这是一个很好的观点。它完美地工作。感谢您的帮助@Pavan。另一个问题，如果你有时间。如果你不得不做同样的事情。你会怎么过？我很好奇，我想进步:)

【解决方案2】：

使用<%= "#{project.color}" %> 代替#{project.color}

【讨论】：