Get started with less.js CDN

Apache-2.0 licensed

Less.js: Dynamic/static CSS compilation of Less styles to compatible CSS.

Tags:
  • less
  • less.js
  • css
  • css3
  • preprocessor
  • pre-processor
  • popular

Stable version

Copied!

How to start using less.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with less.js CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/less@4.2.0/dist/less.min.css">
  <script src="https://cdn.cdnhub.io/less.js/4.2.0/less.min.js"></script>
</head>
<body>
  <div id="box" style="width: 100px; height: 100px; background-color: #ccc;"></div>
  <script>
    less.modifyVars({
      'box-color': 'red'
    });

    less.render('.less-class', function (err, output) {
      if (err) return console.log('Error:', err);
      document.getElementById('box').style.backgroundColor = output.css.toObject().box.color;
    });
  </script>
  <style type="text/less" class="less-class">
    .box {
      width: 100px;
      height: 100px;
      background-color: @box-color;
    }
  </style>
</body>
</html>
Copied!
Copied!

All versions