我可以基于Bootstrap LESS变量动态编译新的CSS吗？(Can I dynamically compile new CSS based on Bootstrap LESS variables

我可以基于Bootstrap LESS变量动态编译新的CSS吗？(Can I dynamically compile new CSS based on Bootstrap LESS variables?)

我有一个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）我是以错误的方式来做这件事的吗？ 我觉得它会更干净，但我开始怀疑。

I have a Rails 3.2 application where each user has his own subdomain. He is able to change the look and feel of a few things. The way I used to do this before Bootstrap was:

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.

It was a little ugly to do it this way, but it worked fine. I have since migrated the application to use Twitter Bootstrap via the twitter-bootstrap-rails gem. This has allowed me to clean up a ton of code. What I want to do now is clean up this CSS customization functionality.

I would like to make the new CSS changes based simply on changing Twitter Bootstrap LESS variables. My new LESS file for a subdomain would be generated like this:

@bodyBackground: #ffffff; @navbarLinkColor: #ffffff; @navbarText: #ffffff; @headingsColor: #666666; @linkColor: #000000; @navbarBackgroundHighlight: #000000; @baseFontFamily: Verdana, Tahoma, Geneva, sans-serif;

Note that there are only variables in this file. All the settings are in the Bootstrap code. So upon saving this I would need to recompile ALL of the Boostrap CSS dynamically. A couple of questions:

1) Is this even possible? If these variables are already set to defaults in Twitter Bootstrap, how can I override them?

2) Am I going about this the wrong way? I thought it would be cleaner but I'm beginning to wonder.

最满意答案

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

@import "bootstrap_and_overrides.css.less";

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

All I needed to do was to add this to the top of the LESS file:

@import "bootstrap_and_overrides.css.less";

And that took care of everything. Much cleaner!!!