2

So I'm currently using .Less and want to create a get command to read the .less attributes and push them to an object so that I can then use this data in an angularJS directive. But I'm having trouble figuring out the best way to approach this.

Example .less file contains this:

@lightBg: #f5f8f9;  
@lightText: #f5f8f9;  
@semiLightText: #e7e7e7;  
@semiLightBg: #e7e7e7;

The idea is to get the data from this file and push the data into an object like so: 

{name:"@lightBg", hex:"#f5f8f9"};

Example get command in angular so far: 

 $scope.hexcss = {};
     $http.get('mixins.less').then((response) => {
     });

Any guidance on the best way to achieve this would be greatly appreciated!

Akkusativobjekt
  • 2,005
  • 1
  • 21
  • 26
Sarah
  • 151
  • 1
  • 1
  • 3
  • Might be a better idea to do something like this: https://www.jonathanfielding.com/how-to-use-your-sass-variables-inside-your-javascript/. Instead doing an HTTP request each time you those less variables, as your less is compiled once, you should be able to get your variables as JSON once :). – WilomGfx Jun 02 '17 at 11:44
  • Please check this, https://stackoverflow.com/questions/8987550/convert-css-text-to-javascript-object – Sarang Damkondwar Jun 02 '17 at 12:46
  • See https://github.com/Craga89/less-plugin-variables-output. Though usually it's more efficient to do the opposite: have a JSON with your custom color and apply them to your Less project/theme during compilation. – seven-phases-max Jun 02 '17 at 16:53

0 Answers0