MENU


Less

Like Sass, Less is an extension of CSS. Although you can install Less via the NodeJS package manager npm and Rhino, there are many GUI tools such as Koala, Crunch, SimpLESS, and WinLess that allow you to compile Less to CSS.

Less is also supported by many online editors such as CodePen, JSBin, CSS Deck, Fiddle Salad etc.

A Less file ends with the extension '.less'.

Less can be run directly in the browser using less.js, although this practice is not recommended for production purposes as there is a performance cost.
If you wish to run Less in the browser, make sure the codes appear in this order: Less stylesheet -> Less options -> less.js. 
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
For brevity the options can be set as attributes on the script and link tags. 
<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less"/>


Options:
async true
false		 Whether to request the import files with the async option or not.
dumpLineNumbers ''
'comments'
'mediaquery'
'all'		 When set, this adds source line information to the output css file. This helps you debug where a particular rule came from. The 'comments' option is used for outputting user-understandable content, whilst 'mediaquery' is for use with a firefox extension which parses the css and extracts the information.
env 'development'
'production'		 In production, your css is cached in local storage and information messages are not output to the console. If the document's URL starts with file:// or is on your local machine or has a non standard port, it will automatically be set to 'development'.
errorReporting html
console
function		 Set the method of error reporting when compilation fails.
fileAsync true
false		 Whether to request the import asynchronously when in a page with a file protocol.
functions (function definitions) eg.
less = {
    functions: {
        myfunc: function() {
            return new(less.tree.Dimension)(1);
        }
    }
};
logLevel 0
1
2		 The amount of logging in the javascript console. Note: If you are in the production environment you will not get any logging.
poll (milliseconds: 1000) The amount of time between polls while in watch mode.
relativeUrls true
false		 Optionally adjust URLs to be relative. When false, URLs are already relative to the entry less file.
globalVars (variable definitions) Global variables. Eg. less.globalVars = { myvar: "#ddffee", mystr: "\"quoted\"" };
modifyVars (variable definitions) As opposed to the globalVars option, this puts the declaration at the end of your base file, meaning it will override anything defined in your Less file.
rootpath (path) A path to add on to the start of every URL resource.
useFileCache true
false		 Whether to use the per session file cache. This caches less files so that you can call modifyVars and it will not retrieve all the less files again. If you use the watcher or call refresh with reload set to true, then the cache will be cleared before running.