Anyone who wishes to program or design modern websites will not be able to avoid CSS. The stylesheet language is – like HTML – one of the core languages of the World Wide Web and enables website content to be clearly dis­tin­guished from its graphical present­a­tion. This allows variables like layout, colours, or ty­po­graphy to be adjusted at any time, without having to com­pletely overhaul the source code. This design-related in­form­a­tion is stored in stylesheets based on CSS. However, the larger a web project is, the more complex and confusing stylesheets become – and hence the more difficult it becomes to work with the web language. The CSS pre­pro­cessor Less provides welcome relief here.

What is Less?

Less (Leaner Style Sheets) is a reverse-com­pat­ible language extension or pre­pro­cessor for the stylesheet language CSS. This means that any CSS code is also auto­mat­ic­ally a valid Less code (but this is not true in the other direction). The purpose of Less is to make writing CSS code more efficient. The language in­flu­enced by SASS thus offers a range of additions to the standard CSS in­struc­tions, including variables and functions that, for instance, enable easier stylesheets and eliminate the need for tedious code du­plic­a­tion.

mAHUT1aXUfQ.jpg To display this video, third-party cookies are required. You can access and change your cookie settings here.

When Alexis Sellier released the CSS pre­pro­cessor in 2009, the compiler for con­vert­ing Less into CSS was still written in the object-based pro­gram­ming language Ruby. Now, however, the JavaS­cript tool Less.js forms the basis of the stylesheet language and the com­pil­a­tion process – with the advantage that Less cannot only be compiled on the server side but also on the client side (in web browsers).

Less vs. CSS: How do they differ?

Both CSS and Less are con­sidered to be stylesheet languages. They are hence formal languages that determine the ap­pear­ance of user in­ter­faces and documents. The stylesheet files con­tain­ing the desired design in­struc­tions simply need to be assigned to the HTML elements of a website; the browser takes care of in­ter­pret­a­tion. The key dif­fer­ence between Less and CSS is that CSS is a static language, whereas Less ranks among the dynamic languages and therefore also offers dynamic features such as variables, operators, functions, mixins, and nesting that are not available in CSS.

While in­struc­tions in CSS have to follow a fixed scheme, Less opens up sub­stan­tially more flexible pos­sib­il­it­ies for de­velopers: For example, in­di­vidu­al rules can be defined for any class of elements through­out an entire stylesheet – rendering tedious code re­pe­ti­tion un­ne­ces­sary. As a result, the syntax of the two languages also varies. Less syntax can generally be clas­si­fied as a meta­syn­tax of CSS, as valid CSS code is also always valid Less code with the same semantics.

How to use Less on clients and servers

If you’d like to use Less for your project, you have two options: You can either use the web browser of your choice to compile your Less stylesheets on the client side via Less.js, or you can install the JavaS­cript ap­plic­a­tion on your de­vel­op­ment computer and convert your code there using Less.js and the JavaS­cript runtime en­vir­on­ment Node.js via command line.

Less CSS: Use on clients

Using Less within a client is the easiest and quickest way to work with the stylesheet language. But this method is not re­com­men­ded for the sub­sequent live en­vir­on­ment, since the ad­di­tion­al com­pil­a­tion of Less to CSS would result in clear per­form­ance setbacks for accessing users. Moreover, browsers with disabled JavaS­cript would com­pletely ignore the design in­struc­tions.

To compile Less in the browser, first specify in the cor­res­pond­ing document that you wish to use Less stylesheets (i.e. stylesheets with the file ending .less). Simply integrate them using the rel attribute “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">

Next, download the current version of Less.js – available for example in the official GitHub re­pos­it­ory for the CSS pre­pro­cessor. You can then integrate the JavaS­cript tool in the <head> section of your project:

<script src="less.js" type="text/javascript"></script>
Note

It’s important to first integrate the stylesheet and then the script. Otherwise, you may encounter pro­cessing issues.

Use of Less CSS on servers

Less is also quick to install and easily executed on de­vel­op­ment computers. Here, you have free choice in terms of the operating system: The CSS pre­pro­cessor runs on Windows, macOS, and UNIX/Linux. However, the above-mentioned JavaS­cript runtime en­vir­on­ment Node.js has to be installed.

Start by down­load­ing the current version for your system from the Node.js website and in­stalling it. Using npm – the packet manager for the JavaS­cript runtime en­vir­on­ment – you should then install the stylesheet language via command line:

npm install -g less

You can now compile prepared Less stylesheets at any time – likewise via the command line. The example file example.less can be converted into a CSS file, for example, with the following command:

lessc example.less example.css

Less tutorial: The main features of Less explained with examples

For anyone who regularly works with CSS, getting to grips with Less is well worth it. Using Less not only offers the advantage of being able to include dynamic behaviour in stylesheet code, but also the ability to save time and effort. Here, however, it’s important to become familiar with how the CSS extension works. After all, to write stylesheets in Less, you also need to know the necessary syntax rules. Using practical Less CSS examples, our short Less tutorial in­tro­duces you to the most important features, including the cor­res­pond­ing notation.

Variables

One of Less’ biggest strengths is the option – as with other pro­gram­ming languages – to create variables. These can store any types of value and are es­pe­cially relevant for values that you use very fre­quently in your stylesheet: For instance, variables are often used to centrally define colours, fonts, di­men­sions (size, height, and width), selectors or URLs as well as their vari­ations (such as lighter/darker). The defined values can then be used anywhere in the stylesheet, allowing global changes to be im­ple­men­ted with just a single line of code.

The follow code extracts define two variables as examples – one for the back­ground colour (@back­ground-color) and one for the text colour (@text-color). Both contain hexa­decim­al codes:

// Less
@background-color: #ffffff;
@text-color: #000000;
p{
background-color: @background-color;
color: @text-color;
padding: 15px;
}
ul{
background-color: @background-color;
}
li{
color: @text-color;
}

The back­ground colour – in this case white – is assigned to both common text blocks (p) as well as unordered lists (ul). Black is set as the text colour and applies to text in text blocks as well as for list elements (li) in lists.  To perform changes to these defined colours and specify, for example, white text on a black back­ground for lists and text passages, all you need to do is exchange the values of the two variables. In a standard CSS sheet, the values would have to be replaced in­di­vidu­ally for all elements. After compiling into CSS, the code then appears as follows:

/* CSS */
p{
background-color: #ffffff;
color: #000000;
padding: 15px;
}
ul{
background-color: #ffffff;
}
li{
color: #1A237E;
}

Mixins

Mixins are similar to variables. But in this case, it’s not in­di­vidu­al values but whole classes as well as the values specified therein that are centrally defined in order to then be passed on at any time to other classes in the Less stylesheet. Mixins can also behave like functions and accept para­metres (including default values). The following example is a mixin for rounded corners (.rounded-corners) that is assigned to both the header (#header) and footer (#footer). While the specified value is accepted for the header, #footer gives the mixin its own value (10px):

// Less
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

The compiled CSS for this Less code looks like the following:

/* CSS */
#header {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#footer {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

Nesting

To create inherited at­trib­utes in CSS, you need to write long, com­plic­ated selectors. In Less, you can nest as many selectors within each other as you wish. This al­le­vi­ates the work and also creates a clearer, more com­pre­hens­ible structure in the stylesheet. This feature of the CSS pre­pro­cessor can also be il­lus­trated with an example:

// Less
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { 
font-size: 12px;
a { 
text-decoration: none;
&:hover { 
border-width: 1px 
}
}
}
}

The selectors p, a, and :hover are here bundled in the Less stylesheet, which greatly sim­pli­fies at­tri­bu­tion in a CSS stylesheet. This is clear when looking at the generated CSS for this code example:

/* CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

Operators

The arith­met­ic operators addition (+), sub­trac­tion (-), mul­ti­plic­a­tion (*), and division (/) can also be used in Less stylesheets by applying the re­spect­ive operator to any number or colour value. This means you can easily create complex in­ter­de­pend­en­cies between the values of various elements which persist even when you change the base values. If con­ver­sion is rendered im­possible or in­ap­pro­pri­ate by an operator, it will be auto­mat­ic­ally ignored – for example, if a cen­ti­metre value is added to a pixel value. The following example shows you how operators can be used in Less:

// Less
@the-border: 1px;
@base-color: #111;
#header {
	color: (@base-color * 3);
	border-left: @the-border;
	border-right: (@the-border * 2);
}
#footer {
	color: (@base-color + #003300);
}

The basic defin­i­tions for borders (1px) and the base colour (#111), which cor­res­ponds to a black, are also applied to the header and footer, whereby three operators affect the base values:

  1. The base colour is mul­ti­plied by three in the header. This results in the hex value #333, which equates to a dark grey.
  2. The right border in the header is given the mul­ti­plic­a­tion operator * 2 and is therefore twice as wide as the standard border (2px).
  3. The basic colour of the footer is likewise ma­nip­u­lated by an operator. Here, the hex value #003300 is added to the base value #111, which gives the footer a dark green (#114411).

The im­press­ive results can also be seen in the compiled CSS code:

/* CSS */
#header {
	color: #333;
	border-left: 1px;
	border-right: 2px;
}
#footer {
	color: #114411;
}

Functions

Less also adds functions to CSS which provide a whole range of options: For example, you can add complex logical re­la­tion­ships with the if or Boolean function in a Less stylesheet. Or you can use functions that are no less complex for math­em­at­ic­al cal­cu­la­tions such as cosine, sine, and tangent. On the other hand, basic functions for quickly defining colours (rgb, rgba, hsv, etc.) or functions for colour operators such as contrast, saturate/de­sat­ur­ate or lighten/darken are also possible. To increase or decrease the sat­ur­a­tion of an element, for instance, you only need a colour value and the function saturate. By spe­cify­ing a per­cent­age (0–100%), you can also define the degree to which sat­ur­a­tion should be changed.

// Less
@red: #842210;
#header {
color: saturate(@red, 20%); ->#931801
}
#footer { 
color: desaturate(@red, 10%); ->##7d2717
}

In this example, the dark red colour is defined with the hexa­decim­al code #842210 in the Less stylesheet and is entered as the colour for the header and footer. But an increase of 20 percent is to be applied to the header, while the Less code should reduce the sat­ur­a­tion in the footer by 10 percent. In the CSS stylesheet, the functions and the colour variable (@red) are converted, and therefore only the hex codes with the re­spect­ive sat­ur­a­tion level can be seen:

/* CSS */
#header {
color: #931801
}
#footer { 
color: #7d2717
}

Less CSS: Less work, more pos­sib­il­it­ies

This brief Less tutorial only touched on a fraction of the options that make the CSS pre­pro­cessor so useful. Once you have defined variables, mixins, and other functions, you can apply them to new elements in your stylesheet at any time – without starting again from scratch as is often the case with CSS code. If values such as the base colour change, you can easily adjust them with little effort in a working Less document – which also makes the CSS pre­pro­cessor a valuable aid for the long-term present­a­tion of a web project.

Tip

Detailed in­form­a­tion on the in­di­vidu­al Less features can be found in the in-depth guide on lesscss.org.

Go to Main Menu