recompile less to css with less.modifyVars() and angular

Question

I have a list of inputs, created by:

<div ng-controller="MainCtrl">
<div ng-repeat="variable in variables">
    <label>{{ variable.slug }}</label>
    <input type="text" ng-model="variable.value" ng-change="variableChange()" />
</div>
</div>

And a controller:

function MainCtrl($scope) {
    $scope.variables = [
        {'slug':'background', 'value':'#666'},
        {'slug':'foreground', 'value':'#999'}
    ]
}

I'm using the less.js to compile the less in the browser, and I want to be able to re-compile it when the variable changes - something like inside the controller:

$scope.variableChange = function() {
    less.modifyVars({ variable.slug : variable.value });
};

But I get the error:

ParseError: Unrecognised input in preview-style.less on line 102, column 1:
[email protected]: variable.value;

But if I remove the apostrophes for the variables, I get an angular error:

Bad Argument: Argument 'MainCtrl' is not a function, got undefined

Can anyone help with this?

Edit: here's the less.modifyVars() function if it helps:

less.modifyVars = function (a) {
    var b = "";
    for (var c in a) b += ("@" === c.slice(0, 1) ? "" : "@") + c + ": " + (";" === a[c].slice(-1) ? a[c] : a[c] + ";");
    less.refresh(!1, b)
}

Davin Tryon · Accepted Answer · 2013-12-10 13:12:50Z

1

If you are writing inside the controller, you must address a scoped property with $scope:

$scope.variableChange = function() {
    less.modifyVars({ $scope.variable.slug : $scope.variable.value });
};

But that will not get this example to work because of the ng-repeat.

It would be better to pass the object to the function:

<div ng-controller="MainCtrl">
<div ng-repeat="variable in variables">
    <label>{{ variable.slug }}</label>
    <input type="text" ng-model="variable.value" ng-change="variableChange(variable)" />
</div>
</div>

And then call less like this:

$scope.variableChange = function(selectedVariable) {
    less.modifyVars({ selectedVariable.slug : selectedVariable.value });
};

answered Dec 10, 2013 at 13:12

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

babbaggeii Over a year ago

Ah, that seems a better way. However, I get an 'Uncaught SyntaxError: Unexpected identifier' error on the less.modifyVars... line. I changed it to console.log(selectedVariable.slug); and it worked so I guess at least the variable is now available in the controller. I guess the problem is with the less.modifyVars() function. Thanks for your help anyway.

babbaggeii Over a year ago

Solved this now with: var slug = toString(selectedVariable.slug); var value = toString(selectedVariable.value); less.modifyVars({ slug : value });

Collectives™ on Stack Overflow

recompile less to css with less.modifyVars() and angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related