create different css files from same less files

Question

I was wondering if anyone had found a way to create different CSS files from the same less files.

In my context I created a different customer less file. This file consist in a series of variable with their settings for the theme of a specific color and other CSS instruction.

I also have a less file for the default settings.

Here a representation of the less folder

• Less Folder
  • My less folder
    • All the style specific to my context
• customer.default.less

• cutomer.less

  I would like to compile two different css from the "My less folder" the first one would use the customer.default.less file in the variables. The second one would use the customer.less file. Creating the customer.default.css and the customer.css. In order of having the customer.css and the customer.default.css all way in synch together.

I'm currently using the compiler plugin in webstorm. Am I using the right tool?

Thanks

Answer 1

You can indeed produce multiple CSS outputs from a Less file, provided you use 'control' Less files.

Eg, here is the main stylesheet we're using for a site:

/* main-stylesheet.less */
@maincolor: #ff0000;
@secondarycolor: #00ff00;

body {
  color: @maincolor;
  background-color: @secondarycolor;
}

Now, we want to produce a secondary stylesheet (to output 'customer.default.css', or 'customer.css' as you prefer) - we import the main Less and override its variables:

/* secondary-stylesheet.less */
@import "main-stylesheet";

// Override variables from the 'main' stylesheet.
@maincolor: #0000ff;

Note that we do not define any rules or set any styles here, only override the variables.

Here are the output CSS files:

/* main */
body {
  color: #ff0000;
  background-color: #00ff00;
}

/* secondary */
body {
  color: #0000ff;
  background-color: #00ff00;
}

This is possible because Less uses lazy loading .

Be sure that the file watcher setting 'Track only root files' is disabled; otherwise the main stylesheet in our example would not produce any output css.

(Also, I would separate the two variable declaration blocks into their own Less files - perhaps as theme-variables-default.less and theme-variables-override-a.less )

Answer 2

I think you can accomplish this using the grunt-contrib-less GruntJS task with something like this in your Gruntfile.

less: {
  development: {
    files: {
      "path/to/customer.css": "path/to/customer.less"
      "path/to/customer.default.css": "path/to/customer.default.less"
    }
  },
  production: {
    files: {
      "path/to/customer.css": "path/to/customer.less"
      "path/to/customer.default.css": "path/to/customer.default.less"
    }
  }
}

LESS isn't my bread-and-butter, but using Sass enough and the grunt-contrib-sass task I assume the same set of features would exist.