AngularJS - options in css files

Question

I am currently migrating from user environment to Angular. Since we have a legacy, all front-end resources, such as stylescheets, images, and scripts, must be located on a subdomain, and all URLs must be absolute. I have a bunch of css files with a parameter defining our static domain. I am looking for a native Angular approach to using parameters in css, so I can write smth like:

.body {background: "{{domain}}/img/bg.png";} 

Currently, in our structure, styles are loaded, say, $ http.get (), then processed with .replace, and then added to the DOM.

Any ideas?

Thanks.

Answer 1

Try the $interpolate service. Add it to the method, then use it like this:

 var fn = $interpolate(cssText); var processedCssText = fn(scope); // scope is whatever obj that contains `domain` and other properties that might be used inside cssText 

You can even customize the open and close symbols if necessary. See the documentation for $interpolate for more information.

Answer 2

You want LESS.

http://lesscss.org

This is a "dynamic style language."