Basics
A preprocessor is a program that takes one type of code as input and returns code written in another language as output.
LESS is one of the most popular CSS preprocessors, written in JavaScript. LESS is great because it includes many built-in functions, especially for working with colors (which is why I love it). But that’s not all—its best features are still ahead.
Installation
Let’s start with how to properly install LESS. For this, we’ll need the LESS preprocessor itself, the Mozilla browser, and a couple of lines of HTML code.
Why Mozilla? Because LESS works server-side. Sure, we could set up a local server and then run LESS—but that’s a complicated process. Mozilla is the only browser that supports LESS even without a local server.
You can download the LESS library from the official source . And Mozilla is available here . Now let’s get into the code.
In the head section of your HTML, you need to include two lines:
Let’s get started!
Variables in LESS
Experienced front-end developers have probably wanted to store a value (like a color) and reuse it across different properties (text color, background color, gradient, width, height, etc.). Standard CSS doesn’t allow for this. But in LESS, you can—thanks to support for variables .
A variable is a memory slot in the computer where certain information is stored. You can assign anything to it: a color, element width, height, and so on. To declare a variable, type an at symbol (@), followed by the variable name, then a colon, and the value. For example, to store color #9af133 in a variable called `mainColor`, write:
Then you can use the declared variable in element styles. For example:
In CSS, this would look like:
Variables are especially helpful when you need to apply the same value to multiple properties in your styles. Just look at your page mockup and remember—this is the main color. It’s easier to remember a word than a hex code.
And variables can store more than just colors:
Calculations in LESS
The second useful feature of LESS is that it can do math. While CSS requires precise values, in LESS you can write full expressions. For example, a variable called `mainWidth` can be set to 139 pixels like this:
You can even mix units—“combine apples and oranges,” so to speak!
Believe it or not, you can even add colors!
And LESS supports not just addition, but all kinds of arithmetic operations:
Mixins in LESS
The third useful feature of LESS is mixins.
A mixin is a set of style rules written for a specific element. These rule sets can then be reused on other blocks in CSS. How? First, let’s look at how to create one. The syntax is: start with a dot, followed by the mixin name, curly braces, and inside the braces you write the properties (shadow, line-height, width, background, etc.)
For example, to create a mixin called `myMixin` with a shadow offset of 2px up, color #222, and width 20px, write:
Then you can apply that mixin to elements on the page:
When compiled into CSS, it will look like this:
Pretty useful, right? But there’s more.
You can also declare parameters inside mixins. These act like variables in regular CSS. To add parameters, just include parentheses after the mixin name and put the variable names inside them. It looks like this:
Then you can apply the mixin with values passed as arguments, like this:
This compiles into the following CSS:
In other words, the values you pass in replace the mixin parameters. Cool, right?
DRY with LESS
And finally—have you heard of the DRY principle (Don’t Repeat Yourself) in programming? It means that the same code shouldn’t be repeated over and over. This keeps your code cleaner and shorter. Fortunately for us, LESS embraces DRY.
Front-end devs sometimes repeat selectors without realizing it, violating the DRY rule. This slows down page loading and increases data usage—especially important for mobile users. This is where LESS helps. To define a rule for an element inside another, just nest one rule inside the other. Here's how:
For example, if you want to style a paragraph inside a div, you write:
After compiling, the resulting CSS will be:
This approach reduces the chance of repeating selectors.
What if we want to add a rule using a pseudo-class or pseudo-element? In that case, we use the parent selector: & What does that mean? Let’s explain.
Say you have a link. You want to remove its underline and set its color to #9af133. You write:
The ampersand (&) refers to the parent selector—that’s why it’s called that.
Summary
Today we went over the core things you can do with LESS. It’s easy to see that the main benefit of using this preprocessor is speeding up your workflow and handling repetitive style logic more efficiently—especially in large projects.
Try using LESS in your next project and let us know what you think!