Question

我有一个类似的哈希：

hash = {"body"=>{"background_color"=>"#d6e9c6"}, "control_label"=>{"font_family"=>"arial", "font_size"=>"12px"}}

如何将其转换为此类css规则？

body { 
  background-color: d6e9c6 
}

.control_label { 
  font-family: "Arial"; 
  font-size: "12px" 
}

到目前为止已经做到了这一点，但是卡住了，任何帮助都会很棒。

hash.map {|k,v| "#{k} #{v.keys.map(&:dasherize)}"}.join("\n")

Answer 1

在页面中执行此操作。

<% hash.each do |rule,styles| %>
  <%= rule %> {
    <% styles.each do |k,v| %>
      <%= k %>: <% v.inspect %>;
    <% end %>
  }
<% end %>

你可以将它作为局部变量，将hash作为局部变量，或者你可以为它做一个帮助：

def hash_to_css(hash)
  lines = []
  hash.each do |rule,styles|
    lines << "#{rule} {"
    styles.each do |k,v|
      lines << "  #{k}: #{v.inspect};"
    end
    lines << "}"
  end
  lines.join("\n")
end

现在在您的页面上，您可以说

<%= hash_to_css(@my_css_hash) %>

编辑：正如@mudosowba在评论中指出的那样，为了实现这一点，＆＃34;输入＆＃34;信息首先需要正确。即，您需要将".control_label"作为哈希键而不是"control_label"。

Answer 2

TAGS=['body']
hash.map do |k, v| 
  (TAGS.include?(k) ? k.to_s : ".#{k}") + 
    " {" + 
      v.map { |k, v| "#{k.tr('_','-')}: \"#{v}\";" }.join($/) + 
    "}"
end.join($/)

首先，您要指定要作为标记处理的内容，以及要添加点的内容，例如类。这种方法可以轻松扩展到id s（#blah）。 TAGS常量用于确定我们是否应该为css规则添加点。

然后我们只将哈希键映射到css规则，将内部哈希映射到css指令。在指令中，下划线代替破折号。

希望它有所帮助。

Answer 3

这是Hash的快速猴子补丁（你可以把它放在Rails初始化器中）：

module ToCss
  def to_css
    select { |_, t| t }.keys.join(" ")
  end
end

Hash.include(ToCss)

然后您可以这样使用它：

{ 'class1' => condition1, 'class2' => condition2 }.to_css
# Will return "class1 class2" if both condition1 and condition2 are truthy
# Will return "class1" if only condition1 is truthy
# Will return "" if both conditions are falsy

如何将Ruby哈希转换为CSS规则？

3 个答案: