我可以基于Bootstrap LESS变量动态编译新的CSS吗?

时间:2013-02-28 14:01:14

标签: twitter-bootstrap ruby-on-rails-3.1 ruby-on-rails-3.2 twitter-bootstrap-rails

我有一个Rails 3.2应用程序,其中每个用户都有自己的子域。他能够改变一些事物的外观和感觉。我之前在Bootstrap之前做的方式是:

1) Keep a template of a customizable CSS file.

2) Solicit input for certain CSS settings via a form.

3) On form submission, write a new CSS file based on the template, but with the new settings.

4) Associate the new CSS file with that partiular subdomain, and serve it up when the subdomain is accessed via the main layout template.

这样做有点难看,但它工作得很好。我已经迁移了应用程序,通过twitter-bootstrap-rails gem使用Twitter Bootstrap。这让我可以清理大量的代码。我现在要做的是清理这个CSS自定义功能。

我想基于更改Twitter Bootstrap LESS变量来进行新的CSS更改。我的子域的新LESS文件将生成如下:

@bodyBackground: #ffffff;

@navbarLinkColor: #ffffff;

@navbarText: #ffffff;

@headingsColor: #666666;

@linkColor: #000000;

@navbarBackgroundHighlight: #000000;

@baseFontFamily: Verdana, Tahoma, Geneva, sans-serif;

请注意,此文件中只有variables。所有设置都在Bootstrap代码中。因此,在保存这个时,我需要动态地重新编译所有Boostrap CSS。几个问题:

1)这甚至可能吗?如果这些变量已经在Twitter Bootstrap中设置为默认值,我该如何覆盖它们?

2)我是否采取了错误的方式?我觉得它会更干净,但我开始怀疑。

1 个答案:

答案 0 :(得分:0)

我需要做的就是将它添加到LESS文件的顶部:

@import "bootstrap_and_overrides.css.less";

这照顾了一切。更干净!!!