angular-less v1.0.0
ngLess
Automagically render LESS <link>s in AngularJS.
Installation
Download angular-less.js and add it to your HTML:
<script src="angular-less.js"></script>You can also find it on Bower:
bower install angular-lessUsage
1- List it as a dependancy for your module:
var app = angular.module('myApp', ['ngLess']);2- Add <link>s, just like you are supposed to:
<link rel="stylesheet/less" href="style.less">ngLess will asynchronously issue a $http.get() for the file and insert a <style> in the <head> containing the less.render()d version of the file.
Caveats
When you include
less.jsin your project, it will automatically check for<link>s withrel="stylesheet/less"and convert them to CSS. You have to make sure that you add your<link>s after you loadless.js. If you don't, the behaviour is undefined. (I always wanted to say "behaviour is undefined". It's such a cool way to say "I was too lazy to check what would happen.")The
<style>element created by ngLess is removed when$destroyon the<link>element is fired. If you add and remove<link>s in a way that AngularJS won't detect, you will end up polluting your<head>with unwanted<style>s.ngLess attaches an
angular.directive()to<head>to work. If you don't have a<head>(can you even not have a<head>?), ngLess will not work.
10 years ago