How to recompile variables.less?

Question

I'm working with Twitter Bootstrap using .less files on my site, and I have changed something in variables.less, and now I want to recompile the code. Can anybody point me to a source for how to recompile the .less code? Manually editing the file is not working.

Answer 1

Try SimpleLess. It's free for all platform http://wearekiss.com/simpless

Answer 2

Here follows a possible set of operation to perform to recompile changes. I suggest you to do the changes in a different file and then import the file with custom changes:

• create a custom.less file in the same or a parallel directory (ex.: ../shared) of the variables.less file; add in the custom less file the reference to the variables.less file and the new definition of the constant (ex.: cell padding for tables);

  @table-cell-padding:            5px;
  @table-condensed-cell-padding:  2px;
  

• add the reference to the custom.less file in the bootstrap.css file soon after the variables.less

  // Core variables and mixins
  @import "variables.less";
  @import "../shared/custom.less";
  @import "mixins.less";
  

• compile the modified less files with web compiler (install it from Tools->Extensions and Updates if you don't have it);

• check into bootstrap.css that the custom values are properly changed as the ones you set in custom.less;
• check in compilerconfig.json (a file created from Web Compiler) that the file bootstrap.css that you are creating with compilation is the same referred in _Layout.cshtml; In case, modify the outputFile of the json file to overwrite the bootstrap.css referred in the _Layout.cshtml file;