LESS variables not resolved properly in markup

[cognivator]

UPDATE:

Created Pull request #549.

Original

Loving the tool, so far, with a couple caveats. This is the biggie for us.

LESS variables appear in the styleguide unresolved. This source,

// Colors
//
// @my-favorite-color - Same as everyone else's
//
// markup:
// <div style="background: {$modifiers}" class="styleguide-color">{$modifiers}</div>
//
// Styleguide 1.0
@my-favorite-color: #0000FF;

renders as a white block with the label '@my-favorite-color'.

I've traced the problem to the regular expression in AngularJS filter 'setVariables' in app.js,

  // Replace $variables with values found in variables object
  .filter('setVariables', function() {
    return function(str, variables) {
      if (!str) {
        return '';
      }

      var sortedVariables;
      if (variables) {
        sortedVariables = variables.slice().sort(function(a, b) {
          return b.name.length - a.name.length;
        });
      }

      angular.forEach(sortedVariables, function(variable) {
        str = str.replace(new RegExp('\\$' + variable.name, 'g'), variable.value);
      });
      return str;
    };
  });

This RegEx does the trick for LESS variables,

      angular.forEach(sortedVariables, function(variable) {
        str = str.replace(new RegExp('\[\$\@]' + variable.name, 'g'), variable.value);
      });

I'm happy to create a PULL request if it speeds the resolution (although this would be my first PULL request ever, so some coaching may be necessary...)