Make it easier to import customer's LESS variable definition file

[vinkaga]

At this time, in order to customize look and feel, mobile-angular-ui.less, mobile-angular-ui-desktop.less and variables.less files need to customized.

If there were an import statement at the end of variables.less file as follows

@import "customer.less"

along with an empty customer.less file (in src/less directory), a customer could simply modify that file (through gulp/grunt) and get a customized CSS.

[mcasimir]

I think the right way would be to install mobile-angular-ui via bower and then setup a custom gruntfile with a less task configured like this:

    less: {
      dist: {
        options: {
          paths: ["mysrc", "bower_components"]
        },
        files: {
          "style.css": "mysrc/style.less"
        }
      }
    }

Then in style.less you can import bower_components/mobile-angular-ui/src/less/mobile-angular-ui.less and customize any variable overriding it.

As far as I know less variables have no scope. They always affects the whole style. Overriding a variable will rewrite it's value wherever it's used.

@import 'mobile-angular-ui/src/less/mobile-angular-ui.less';

// Overrides
@app-bg: green;
@sidebar-width: 500px;

// ...

[vinkaga]

You are right, the variables declared at the end DO override any previous declarations even in the classes defined before the redeclaration. My understanding was not correct.
See:
less/less.js#297