6

We use bootstrap in a project. We bought a custom made theme for bootstrap that created a nice custom style around it and added a lot of useful styles we used in our project. This theme uses LESS.

Now each of our clients wanted a custom color scheme for their site. By simply changing some LESS variables, we can generate a completely different appearance.

For example:

@import "../../theme/style.less";
@import "../../shared.less";

// Basic Colors
@navy: #781d7e;       // Primary color
@dark-gray: #c2c2c2;  // Default color
@blue: #8dc63f;       // Success color
@lazur: #00aedb;      // Info color
@yellow: #f7941e;     // Warrning color
@red: #ed1c24;        // Danger color

This generate a complete css file with all the styles. Each client has it's own set of generate .css files. Our problem is that it takes a long time to compile those each time we make changes.

How could we, using LESS, have a base theme and generate only classes overrides that are needed to modify values where the modified variables are used?

For example if btn-primary background-color is @navy, then for a new color scheme all I need is a css file containing a class override for .btn-primary changing background-color to the new value of @navy. Is this even possible with LESS?

Thanks,

EtienneT
  • 5,045
  • 6
  • 36
  • 39
  • 1
    what do you use to compile the LESS – nolawi Mar 11 '15 at 19:34
  • Right now, Web Essentials in Visual Studio recompiles everything on save. Our site specific css that doesn't change with the theme is in another file that doesn't take a lot of time to recompile. But each time we add an element that might change based on the theme, it takes forever. – EtienneT Mar 11 '15 at 19:37
  • can you not use something that is designed to precompile LESS/SASS like compass and grunt... they are super fast – nolawi Mar 11 '15 at 19:41
  • Web Essentials uses node-less latest version to compile. – EtienneT Mar 11 '15 at 20:09
  • Well, in short: no, there's no automatic way to "extract" only those classes that depend on variables (and even if it was it won't have better timings since it still would need to parse and evaluate everything to decide what's changed and where it is used). You can do that manually, for example for `.btn-primary` you may to compile `buttons.less` only to get corresponding button styles, but this is barely a solution since soon you'll end up with too many files to be compiled separately and it takes eve more time to compile (not counting it also becomes unmaintainable). – seven-phases-max Mar 12 '15 at 03:07
  • Well, it's hard to suggest anything specific w/o knowing your workflow, but assuming the count of "clients" is really huge (assuming one BS project takes less than 1 sec to compile it must really be a lot to become "infinite") something like separation of development and production workflow would be a good starting point. E.g. make that "infinite compile everything" task to perform in background and make it trigger only when the production site is actually to be updated. And change the development part so that it compile only the stuff ("base theme"?) you're working on currently. – seven-phases-max Mar 12 '15 at 03:21
  • I'm curious how much time each compilation of less it takes? – D_S_toowhite May 10 '15 at 14:29

1 Answers1

1

See my answer to a similar question this could help to solve your problem. https://stackoverflow.com/a/25055203/138029

If you are using MVC 4 or above you could use BundleTransformer to compile your LESS server side.

It can depend on how you want to serve the file. If you know all the client urls at run time then just add add a bundle url for each client to the bundle config. If you don't and the clients are flexible/dynamic as was the case in our situation then add a controller action to handle dynamic themes.

I've expanded on our original use case and created a more reusable way of including themes.

Demo site here: http://bundletransformer-theme-builder.azurewebsites.net/

GitHub repo here: https://github.com/benembery/bundle-transformer-theme-builder

Community
  • 1
  • 1
benembery
  • 666
  • 7
  • 20