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.

To begin with, 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 programmatically. It will affect 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 another 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 these options to 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 that need to be considered for attribute options are −

  • window.less < script tag < link tag are the importance level.

  • The data attributes cannot be written in camel case; the link tag option are represented as time options.

  • The data attributes with non-string values should be JSON valid.

Watch Mode

The watch mode can be enabled 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 enabled on a temporary basis, 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 following code shows the basic usage of modify variables −

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.

  • errorReporting − When the compilation fails, the error reporting method can be set.

  • fileAsync − It is a Boolean type. When a page is present with a file protocol then it can request whether to import asynchronously or not.

  • functions − It is object type.

  • 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 to 1000.

  • relativeUrls − The URLs adjust to be relative; by default, this option is set as false. This means that 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 included in quotes

  • modifyVars − It is unlike the global variable option. It moves the declaration at the end of your less file.

  • rootpath − It sets paths at the start of every URL resource.

  • useFileCache − Uses per session file cache. The cache in less files is used to call the modifyVars where all the less files will not retrieve again.

Advertisements