1

I am very much new to AngularJS. I want to update the .less files variable dynamically. But didn't get how to access this .less file using AngularJS.

My code:

style.less

@bg-color: #484848;    
.header{ 
     background: @bg-color;
 }

I want to update @bg-color: #484848; present in the style.less file to some value input by user. How can I get this using AngularJS.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
Dipak
  • 115
  • 1
  • 9
  • Maybe this question helps: http://stackoverflow.com/questions/7823204/dynamically-changing-less-variables – Marthijn Jan 29 '15 at 06:49
  • I don't have idea how can I implement this **less.modifyVars({ .. });** function – Dipak Jan 29 '15 at 07:42
  • I've never used it either, google is your friend :) – Marthijn Jan 29 '15 at 09:31
  • I found some link here -[http://runnable.com/UnP3Yzjpzm8_AAB2/how-to-modify-variables-for-less-js](http://runnable.com/UnP3Yzjpzm8_AAB2/how-to-modify-variables-for-less-js) But, it is not in AngularJS – Dipak Jan 29 '15 at 09:50

1 Answers1

1

You should run Less in browser to do this. If you load less.js in your HTML, the global less object come available, so you can use less.modifyVars() and less.refreshStyles() inside your angularJS code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example78-production</title>

<link rel="stylesheet/less" type="text/css" href="color.less" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js"></script>

</head>
<body ng-app="submitExample">
  <script>
  angular.module('submitExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.list = [];
      $scope.text = 'orange';
      $scope.submit = function() {
        if ($scope.text) {
        less.modifyVars({ color : $scope.text });
        }
      };
    }]);
</script>
<h1>Colored text</h1>
<form ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter:
  <input type="text" ng-model="text" name="text" />
  <input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>

See: http://plnkr.co/5b1HTkneFXLMGVvXEG8j http://plnkr.co/edit/Z9tRY3Lol31PMnPUfxQi

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224