0

So we have users who can define their own templates. However. It's turning out that these templates can live on the same page for a short time, which means the css in template 1 that targets h1 would also affect any h1s in template 2.

Now, if I were writing the CSS, it would be trivial to change code like this:

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

to this:

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

What I'd like to do, however, is read in all of the CSS, and prepend the template ID to each CSS declaration as I've outlined above. Each template has a slug, so we'll wrap the template in a div with the slug as an ID.

Is there a simple way to prefix selectors with an ID in rails, without using a CSS regex? And if so, are there any gotchas I should be aware of when adding said prefix?

EDIT:

SCSS seems like the way to go. So how do I process something stored in the DB as scss?

4

2 回答 2

1

使用 SCSS：

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

  ...
}

使用 SASS：

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

  ...
于 2013-05-27T15:01:07.820 回答
-1

我想我明白。您希望动态生成 css 吗？

你有类似的模型吗？

class Template < ActiveRecord::Base
  attr_accessible :css
end

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

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

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

于 2013-05-27T16:40:38.220 回答