President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
Less.js (or just Less) is a CSS preprocessor that can revolutionize the way you write CSS. And it’s easy to install and set up for web development.
There are several ways to install and configure Less, but for developing in the browser, or if you’re just interested in trying it out without having to install it on a web server, the fastest way is to reference the less.js library in an HTML document. Let me show you how.
Alternatively: If you use Git, fire up the CLI, navigate to your project’s directory, and then clone the Less repo to your computer:
git clone https://github.com/less/less.js.git
There’s a lot of files and directories inside the less.js-master directory when you open it but we’re only interested in what’s inside the dist directory (which in open source lingo is short for “distribution” directory, the files for production use).
Inside the dist directory you’ll find two JavaScript files: less.js and less.min.js — you can use either one.
less.js is the commented version, which is great if you like reading source code.
less.min.js is a minified version that has a smaller file size.
Put less.js or less.min.js in your project’s directory.
By default, Less will warn you whenever it encounters errors in the web page. This is useful during web development.
Compile Less CSS Before Deployment
Once development is complete, compile .less files into regular .css files. If you want to do this quick-and-dirty, you can use an online Less compiler.
The Less CSS above was compiled to the following by using LESSTESTER:
Though the method described in this tutorial is the fastest way to get up and running with Less, it’s best used only for exploring, testing, and development because having the JavaScript library process your CSS every time a visitor requests your web page is bad for performance.
Once you’re ready to commit to Less and use it in your web development projects, the best options would be to install and set it up on the web server or to remove the less.js library and compile your Less CSS to normal CSS.