Getting Started with Less

The Easy Way 2/2 (Less.js)

Using Less.js

Less.js is a JavaScript file / library that allows you to compile your .less files directly in the browser.

Now, this is easy-as-pie to get setup since you just really need to add the file to your HTML, but this isn't ideal since you really shouldn't be .less files in your HTML.

<script src="less.js" type="text/javascript"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script>less.watch();</script>

This works for beginners but the problem you will face issues for users:

  1. User visits the page
  2. Page loads with no readable styles
  3. User sees unloaded styles
  4. Styles "flash" on and render the CSS

For the sake of learning, feel free to move forward with this method if you find it easy, but just know it's not the ideal setup!