Using Less In The Browser

LESS - Using LESS with Client-Side Compilation

Important Note: Client-side compilation of LESS using less.js in the browser is primarily intended for development purposes, rapid prototyping, or specific dynamic theming scenarios. For production websites, it is strongly recommended to pre-compile your LESS files into static CSS files during a build step to ensure optimal performance and avoid issues like Flash of Unstyled Content (FOUC).

If you need to compile LESS dynamically in the browser, you can include the less.js script.

Setup:

1. Download less.js from the official LESS website or include it via a CDN.

2. Link your .less stylesheets with rel="stylesheet/less":

<head>
  <!-- Link your .less file -->
  <link rel="stylesheet/less" type="text/css" href="styles.less" />
  <!-- Include less.js script AFTER your .less links -->
  <script src="less.js" type="text/javascript"></script>
</head>

less.js will find all link tags with rel="stylesheet/less" and compile them in the browser, creating style tags with the compiled CSS.

Setting Options Programmatically

You can configure less.js by setting options on a global less object before the less.js script tag is included:

<script>
  window.less = {
    env: "development", // or "production"
    async: false,
    fileAsync: false,
    poll: 1000,
    dumpLineNumbers: "comments" // Or "mediaQuery"
  };
</script>
<script src="less.js" type="text/javascript"></script>

Options can also be set via data-* attributes on the script tag for less.js or on individual link tags for .less files. Attribute names are dash-cased (e.g., data-env). Non-string values should be JSON valid.

Example with link tag attributes:

<link rel="stylesheet/less" type="text/css" href="theme.less"
      data-global-vars='{ "primaryColor": "#007bff", "fontSize": "16px" }'
      data-dump-line-numbers="comments" />

Watch Mode (Development)

For easier development, watch mode automatically recompiles your LESS files when they change. Enable it by setting env: 'development' in the options and calling less.watch():

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

Alternatively, adding #!watch to the URL temporarily enables watch mode.

Modifying Variables Dynamically

The less.modifyVars() function allows you to change LESS variables at runtime and recompile the stylesheets. This is useful for live theme customizers.

// Assuming @brand-primary and @text-color are defined in your LESS files
less.modifyVars({
  '@brand-primary': '#FF0000', // New primary color
  '@text-color': '#333333'
});

Each call to modifyVars will trigger a re-compilation of all LESS files.

Debugging

Set the dumpLineNumbers option to "comments" or "mediaQuery". This adds information to the compiled CSS, linking CSS rules back to their original lines in your .less files. This is helpful for debugging styles in browser developer tools.

Using "mediaQuery" is often preferred as it works with browser source map features, offering a better debugging experience. The old “FireLESS” tool is largely obsolete; modern browser dev tools provide superior capabilities.

Common Configuration Options

• env: (String) Set to "development" or "production". Influences watch mode and error reporting.
• async: (Boolean) Whether to request import files asynchronously. Default: false.
• fileAsync: (Boolean) Whether to request import files asynchronously when the page is loaded via file:// protocol. Default: false.
• poll: (Integer) Polling interval (in milliseconds) for watch mode. Default: 1000.
• dumpLineNumbers: (String) How to include line number information for debugging. Options: "comments", "mediaQuery", or "all" (deprecated).
• relativeUrls: (Boolean) Whether LESS should adjust URLs to be relative to the entry LESS file. If false (default), URLs are assumed to be relative to the importing file.
• rootpath: (String) A path to add to the start of every URL resource.
• globalVars: (Object) A map of global variables to be available to all LESS files. Variables are injected at the beginning. String values must be double-quoted within the string (e.g., '"#FFF"').
• modifyVars: (Object) Similar to globalVars, but these variables are effectively added at the end of your LESS files and can be used with less.modifyVars() for dynamic updates.
• logLevel: (Number) Controls console logging: 2 (Info & Errors), 1 (Errors), 0 (Nothing).
• useFileCache: (Boolean, default: true) Whether to cache compiled LESS files within the session. Can improve performance of modifyVars by not re-fetching files unless necessary.

For the most up-to-date and detailed list of options, always refer to the official LESS documentation.