如何使用slim-rails在head标签中编写动态CSS样式？

嘿，我明白你遇到的麻烦了——Slim的语法有时候确实容易绕晕，尤其是在混合Ruby代码和纯文本（比如CSS）的时候。你之前的写法错误地把Slim的HTML元素语法（.state-）当成了CSS选择器的一部分，导致缩进解析出错。

正确的写法 #

你需要把整个CSS规则作为纯文本输出，同时在Ruby循环里完成变量插值。这里有两种靠谱的写法：

写法一：显式输出文本（更清晰）

head
  style
    - State.all.each do |state|
      == ".state-#{state.name.parameterize} { background-color: #{state.color}; }"

写法二：简化的文本插值（Slim自动识别）

head
  style
    - State.all.each do |state|
      .state-#{state.name.parameterize} { background-color: #{state.color}; }

为什么之前的写法不对？ #

你之前的代码：

style - State.all.each do |state| .state- = "#{state.name.parameterize}" { background-color: = "#{state.color}"; }

问题出在这几点：

1. 把Ruby循环- State.all.each...直接写在style标签同一行，Slim无法正确解析缩进结构；
2. 误用了Slim的元素语法（.state-），这会让Slim尝试生成HTML元素，而非作为CSS选择器的一部分；
3. 多余的=符号破坏了文本连续性，触发语法解析错误。

这两种正确写法都会让Slim在style标签内，循环遍历每个State实例，生成对应的CSS类规则，同时保持正确的缩进和语法结构。

内容的提问来源于stack exchange，提问作者rld