Writing in Less: Basic Tutorial

Less is a great CSS precompiler that anyone can learn. It is simple and easy to learn. The syntax itself is straight forward and understandable. It is one of the most popular CSS precompilers out there, and is a competitor of SASS/SCSS. The Less syntax is similar to native CSS and SCSS, so if you have had experience with either one you are able to understand and write Less.

One of the most basic things you can do in Less is set variables. Variables can be colors, fonts, size and so on. I will be demonstrating how to use variables on colors and fonts. Variables are easy to use and make writing your code cleaner and organized. Also I will demonstrate a simple way to use mixins and how to use the fadeout function.

To start off, create a new project on any software development program you prefer using, I am using Netbeans 8.2. You must have Less installed and the path set. Within your project under the WEB folder, create two new folders, one called less, and the other css. Once you have made the folders, create a new Less file under the less folder, this is where you will write your code. In the css folder, a css file will auto generate once you save the less file.

Folder structure and less file

Within the less file you have created, you can start declaring your variables. You should have a ready index html file with content in it. I have a basic header and body.

Variables:

To declare variables in Less, you use a “@” sign and finish them off with a semicolon. I will be changing the colors on the header and body, and also give them different fonts. Declare your variables in the less file.

Here I have declared the header color as green and the body color as red:

Variables are declared with a “@”

Once you have declared your variables, you are able to call them. Under the header class, call the “@headercolor variable, and do the same for the “@bodycolor”:

Save and run your project and the results will show:

Result of the web page, after being saved

Now we can also do this with fonts. Do the exact same as we did with declaring variables for colors.

I will be changing the header font into the Algerian font and the body font into Trebuchet MS. To call the variables, again just call them with in the header and body classes:

Font variables

Once the additions have been saved, the results will display the change:

Web page after the font change using variables

I have shown a basic way you can use variables, there are other ways you can use them, but that was just one way you can apply it.

Mixins:

Mixins are useful when writing in CSS, they act just like variables but embed all properties of a class to other classes. You just have to add the class name as one of its properties.

I am going to mix in a background color to the header. To do this you need to create a <div> tag in the html page where you have your header and name it. After that you need to create a mixin class with the same name that the div class is called, in the less file. Then you are able to call that mixin within another class.

Here I have called my <div> class “background”, and it will be for the header:

div class named “background”

Next you want to create a class in the less file with the same name as the <div> class. I am going to make the background the color blue:

Class “background” in the less file

Once you have made the mixin class, you now are able to call it under the header class:

“background” class added or mixed in the header 1 class

The background color for the header should display blue:

End result of mixin

There are many more ways to use mixins, that example was just a simple one. You can do much more with mixins, what I have shown will help you to explore and use the mixin feature in Less.

Functions - Fadeout:

There are many functions you can use in Less. To name a few there are math functions, color blending functions, type functions and much more. One specific function that I will showing is the fadeout function. It does what it pretty much says which is decreasing the opacity of a color.

For this I will fadeout the color of the body. It currently is red and I will show you what it looks like when I add a background color to it and once you hover over it, the color will fade out by a specific percentage amount.

You first want to add the a <div> tag with the class name of hover around your body sentence, also you want to put a paragraph tag, <p>around it as well:

<div> and <p> tag

You are doing this to separate the function from the body properties, we still want the font color to stay the same.

Next you need to go to your less file and add the <p> class and have a height and width for your hover size, as well as a color for it. I have used a variable to declare my hover and background color.

<p> class in the less file

Now we can add our hover class that includes our fadeout function. When adding the hover class we actually are nesting the class, which allows us to only have it applied to that specific class it is under:

Nesting within the <p> tag

Nesting is a helpful tool that Less provides, it is just to help with organization and easier to write the syntax.

When you have the fadeout function, you just need to pass the “@hovercolor” variable, or the color you have chosen, and the percentage of how much you want to decrease the color.

When you hover over that specific sentence the background color will fadeout by 50%:

Color before Hovering
Color after Hovering, fadeout by 50%

There are many more different functions that we can use, I just showed you how you can play around with one of them.

I have demonstrated to you the basic concepts and features of Less, you now can use variables, mixins and how to use the fadeout function. Less has a bunch of neat features that can make coding CSS much easier and efficient. You are able to do multiple things with it to make CSS more fun. I just touched a bit of what Less is capable of doing, and there are many more resources on the web to show you other ways to use it. Less is one of the many precompilers out there and hopefully you can spend some time learning more about it.

Show your support

Clapping shows how much you appreciated Rachel Bautista’s story.