For some, CSS is the most fulfilling aspect of web development — but like any code, sometimes writing CSS code can become too repetitive and cumbersome. (If you’ve used CSS for a large project, you know what I mean.) Hence, this post aims to introduce you to a new way of styling for your web development projects, using Less (“Leaner Style Sheets”). Less is a way to make your life easier when working with CSS.

Before we get into Less, let’s understand CSS preprocessing.

What is CSS preprocessing?

CSS preprocessing or CSS preprocessors, allow you to extend CSS and gives you more functionality. Like programming languages, they have their own syntax. The CSS preprocessor file has to be compiled into regular CSS to be used. CSS preprocessors have certain features that reduce the workload that comes with writing CSS for a large project. Of course, this doesn’t mean it can’t be used for small scale projects as well.

Note that there are other CSS preprocessors out there, such as Sass and Stylus, but for this post, we’ll focus on Less. We’ll cover the concepts of CSS preprocessing with actual coding examples. This will give you the general understanding you need — Then, you can try out other CSS preprocessing tools.

Getting started with Less

There are various ways to get started with Less, but we’ll use one of the most used mediums — the node package manager, or npm for short. If you don’t have Node set up, or don’t know what it is, don’t worry. Here’s a link that will help you get Node up and running. Once Node is installed, you’ll have access to the node package manager. This tool helps you get a majority of the resources you’ll use in web development.

Now we’re going to use the node package manager to download the Less resource.
Open up your command prompt (for Windows) or terminal (for Mac) and run the command below:

npm install -g less

Open up your favourite IDE (VS Code, Atom, Sublime Text etc.). Then create a folder and name it “Less Tutorial.” (You could name it anything, but I’ll be using this name for the following examples.)
The code snippet below creates a simple HTML page. In the folder you’ve created, create a new HTML file and name it “index.html.” Copy this code into it:

   
   



   
LESS
   

This text here is nothing meaningful, we just need it to add some body to our html page. So don’t mind if I duplicate it. This text here is nothing meaningful, we just need it to add some body to our html page., so don’t mind if I duplicate it. This text here is nothing meaningful, we just need it to add some body to our html page., so don’t mind if I duplicate it.

   

    Don’t click
    Does nothing

   
Links & Bullets
   These links do nothing
   

       
One 1
       
Two 2
       
Three 3
   

Open the index.html file in your browser. You should see plain text, and some links and buttons on a white background. Remember that Less has its own syntax; hence, we will work with a Less file. So create a new file in the same directory as the index.html and name it “style.less.”
In the style.less file, type in the CSS code below:

body{
  background: #f4f4f4;
  font-family: Helvetica;
}

Again, note the browser will not directly read the Less file, so it has to be compiled into a CSS file. So, once again, go back to your command line/terminal and make sure the current directory is “Less Tutorial,” the folder you created containing the HTML and Less file. Execute the command below:

lessc style.less style.css

This command will compile the style.less file into style.css, which is already linked to index.html. Always run this command whenever you make a change to your Less file.

Go to your browser and reload the index.html file. You should see changes to the font style and background color.

Variables

If you’ve ever done any programming at all, the concept of variables won’t be new to you. If you haven’t, variables in programming are used to store information which can later be referenced and used in a program. Why is this important? With Less, you can assign values to variables which can be used later. For example, you may have a color value like #b5ab96, which obviously you can’t remember at first glance. You can store this value in a variable and name it something you can easily remember. Let’s apply this to our little project.

Replace the code in the Less file with the code below:

@background-color: #b5ab96;
@font: Helvetica;
@primary-color:#54465b;
@secondary-color: #68a34f;

body{
  background:@background-color;
  font-family:@font
}

.btn {
  padding: 10px 10px;
  background: @primary-color;
  color: #fff;
  border-radius: 10px;
}

The @ sign beside the variable lets the compiler know that it is a variable. Remember to run the command below in your command line/terminal again, because a change has been made to the Less file.

lessc style.less style.css

Now reload the page and see that your changes work. Variables can save you the trouble of remembering difficult values, and when you need to change styles across your CSS file, by changing only the value assigned to your variable, that change is applied anywhere the variable has been used.

Mixins

Imagine you want to have multiple rules applied to different elements, classes, or IDs. You would end up with the same lines of code in more than one place. This is another area where Less thrives, and it’s called Mixins. Again, if you’ve ever used functions in programming, Mixins are easy to understand. Mixins are used in the same way. You can write a lot of CSS code in a function called a Mixin, and apply all those CSS styles to an element or class by calling the name of the Mixin you created. So, add the lines of code below into your style.less file:

.mainFont {
  font-family: Tahoma;
  border: 1px solid @primary-color;
}

h1, h3{
  .mainFont;
  text-decoration: underline;
}

a{
  .mainFont;
}

Now, go and run the command that compiles the Less file in your terminal and reload your page. The font of the headers and links should now be Tahoma, and should have an underline text decoration.

Nesting

Another functionality provided by CSS preprocessors and Less is nesting. To explain nesting, I’ll give you an example. Assuming you want to apply styling to the unordered list in the index.html file and a whole different styling to the actual list items in the

, you’ll have to do something like this:

ul#lists{
  /**unordered list styling goes here**/
}

ul#lists li{
  /**list item styling goes here**/
}

But with Less, you can nest these style rules as when writing HTML. In HTML, you can have a parent element, a child element of the parent, another child element of a child, and so on. Less uses the same strategy to help you write cleaner, simpler and leaner code. Add the following CSS styles to your style.less file to illustrate how nesting works:

ul#lists{
  background: @primary-color;
  padding: 20px;
  list-style-type: square;

  li{
    background: #cce5ff;
    margin: 5px;
    a{
      color: @primary-color;
      text-decoration: none;
      border: none;
    }
  }
}

For the last time, run the compilation command in your terminal and reload your index.html page in your browser. The final result should look like this.



Although it’s not really the kind of webpage you would build, it helps build a foundation of the concepts of Less and CSS preprocessing. There are other functionalities that Less provides, such as:

1. Performing mathematical operations
2. In-built functions
3. Maps
4. Importing, etc.

The three functionalities covered in this post are the most frequently used ones, and therefore should be very helpful in web development projects. You can learn more about Less and the functionalities it provides from lesscss.org.

I hope you were able to follow this tutorial and can now code a little with Less.