Less - using-less-in-the-browser

Less is used in the browser when you want to compile the less file dynamically when needed and not on the serverside, this is because less is a large javascript file.
First we need to add the LESS script to use LESS in the browser:

<script src="less.js"></script>

To find the style tags on page, we need to add the following line on the page. It also creates the style tags with the compiled css.

<link href="styles.less" rel="stylesheet/less" type="text/css"/>

Setting Options

Before the script tag, options can be set on the less object programatically. It will effect all the programmatic usage of less and the initial link tags.
For instance, we can set option as followed:

<script>
  less = {
    env: "development"
  };
</script>
<script src="less.js"></script>

We can also set the option in the other format on the script tag as specified below:

<script>
  less = {
    env: "development"
  };
</script>
<script src="less.js" data-env="development"></script>

You can also add this options into the link tags.

<link data-dump-line-numbers="all" data-global-vars='{ "var": "#fff", "str": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/style.less">

The points for attribute options are:

• window.less < script tag < link tag are the importance level.
• Cant write data attributes in the camel case and represents the link tag option as time options.
• The data attributes with non string values should be JSON valid.

Watch Mode

The watch mode can be enable by setting the env option to development and call the less.watch() after the less.js file is added. If you want the watch mode to be enable for temporarily then add #!watch to the URL.

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

Modify Variables

Run time modification of LESS variable is enabled. LESS file is recompiled when new value is called. The basic usage of modify variables are:

less.modifyVars({
  '@buttonFace': '#eee',
  '@buttonText': '#fff'
});

Debugging

We can add the option !dumpLineNumbers:mediaquery to the url or dumpLineNumbers option as mentioned above. The mediaquery option can be used with FireLESS(It display the original LESS file name and line number of LESS-generated CSS styles.)

Options

Before loading the script file less.js, options have to be set in a global less object.

<script>
  less = {
    env: "development",
    logLevel: 2,
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    globalVars: {
      var1: '"string value"',
      var2: 'regular value'
    },
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

• async: It is a boolean type. The imported files are requested whether with the option async or not. by default it is false.
• dumpLineNumbers: It is a string type. In the output css file the source line information is added when the dumpLineNumbers is set. It helps in debugging the particular rule came from.
• env: It is a string type. The env may run on development or production. Development is set automatically when the document URL starts with file:// or it is present in your local machine. In Production
• errorReporting: When the compilation fails, set the error reporting method.
• fileAsync:It is a boolean type. When a page present with a file protocol then it request whether to import asynchronously .
• functions: It is object type and user functions.
• logLevel: It is a number type. It displays the logging level in the javascript console.
  
  • 2 : Information and errors
  • 1 : Errors
  • 0 : Nothing
• poll: In the watch mode, the time displays in milliseconds between the polls. It is an integer type, by default it is set as 1000.
• relativeUrls: The URLs adjust to be relative, by default it is set as false that means the URLs are relative already to the entry less file. It is a boolean type.
• globalVars: Inserts the list of global variables into the code. The string type variable should be include in quotes.
• modifyVars: It is opposite of global variable option, it moves the declaration at the end of your less file.
• rootpath: It sets paths on start of every URL resource.
• useFileCache: Uses per session file cache. The caches in less files is use to call the modifyVars where all the less files will not retrieve again.