在 Rails 中编辑 CSS 选择器答案

【问题标题】：Edit css selectors in Rails在 Rails 中编辑 CSS 选择器
【发布时间】：2013-05-28 02:59:23
【问题描述】：

所以我们的用户可以定义自己的模板。然而。事实证明，这些模板可以在同一页面上短时间存在，这意味着模板 1 中以 h1 为目标的 css 也会影响模板 2 中的任何 h1s。

现在，如果我正在编写 CSS，那么像这样更改代码将是微不足道的：

h1 {
  font-family: 'Comic Sans';
}

到这里：

#template-1 h1{
  font-family: 'Comic Sans';
}

但是，我想做的是阅读所有 CSS，并将模板 ID 附加到每个 CSS 声明中，正如我在上面概述的那样。每个模板都有一个 slug，因此我们将模板包装在一个 div 中，并以 slug 作为 ID。

是否有一种简单的方法可以在不使用 CSS 正则表达式的情况下在 Rails 中为选择器添加 ID 前缀？如果是这样，在添加上述前缀时我应该注意什么问题？

编辑：

SCSS 似乎是要走的路。那么如何将存储在数据库中的内容作为 scss 处理呢？

【问题讨论】：

【解决方案1】：

使用 SCSS：

#template-1 {
  h1 {
    font-family: 'Comic Sans';
  }

  ...
}

使用 SASS：

#template-1
  h1
    font-family: 'Comic Sans'

  ...

【讨论】：

好的，接下来的问题是如何在 Rails 中将 CSS 模板处理为 SCSS？ CSS 在模板中建模，例如 template.css。我将如何将其作为 SCSS 处理以进行输出？
让我更清楚...template 是一个导轨模型。在template 内部有一个名为css 的字段。我需要获取该字段并通过scss 处理它。我该怎么做？

【解决方案2】：

我想我明白了。想要动态生成 css？

你有类似的模型吗？

class Template < ActiveRecord::Base
  attr_accessible :css
end

在生产中，您的资产已经被预编译。默认情况下，Sass 仅默认包含在资产组中。这意味着它们只会在您推送项目并编译资产时在 heroku 上运行。

您可以将 sass-rails 移出资产组，但我不知道您将如何让它处理您的数据库中的数据。

我可能会将数据库中的内容存储为 css 并将其嵌入到您页面的视图模板中。

【讨论】：