How to install Less

Details

There are several ways you can use Less.

CDN

The easiest way to use Less is to use the CDN link below.

<script src="https://cdn.jsdelivr.net/npm/less@3.13"></script>

Place it inside the head element (and after your link tag for your Less file).

  <link rel="stylesheet/less" type="text/css" href="main.less">
  <script src="https://cdn.jsdelivr.net/npm/less@3.13"></script>
</head>

Download less.js

Another way to use Less is to download the less.js file from the Less docs. You can then add the following script tag to your head element (assuming the file is in the same folder as your HTML file):

<script src="less.js" type="text/javascript"></script>

Then you can create a Less file and link to it in your head element as well. For example, if your Less file is called styles.less, then you would add the following link element to your head element (assuming the file is in the same folder as your HTML file):

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

Note: If you use this method, you may run into a CORS error. You can try using a tool like Browsersync to get around this error. If that doesn’t work, try installing Less using npm using the instructions below.

Using npm

To install Less globally using npm, enter the following command in your terminal:

npm install less -g

If you have a file called styles.less, you can compile it into CSS using the following command:

lessc styles.less styles.css

Exercises

Use the CDN link or download less.js from the docs (you can use the link in the tutorial) and place it in the install-less folder. Or, try installing Less using npm. The other exercises use the CDN link.