Can I dynamically compile new CSS based on Bootstrap LESS variables?

Question

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.

Answer 1

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!!!