First things first: I am not a web developer and certainly not a designer. The following examples are not intended to represent good practices in terms of design or aesthetics.

But now to the topic: As a software developer you can hardly avoid acquiring basic knowledge in web development. Specifically, I mean the handling of HTML and CSS, also in JavaScript as far as I’m concerned. If you are like me, you basically have no problems with it, but CSS files will become quite confusing and difficult to revise over time. Let’s look at some problems I think CSS has, then I’ll show you how to solve them.

The Problems of CSS

The thing that probably bothers me the most is the lack of variables in CSS. Whether to define color codes or font sizes: the constant duplication of corresponding entries makes me crazy, especially if something needs to be changed. Oh, and how about calculating values based on variables? For example something like: format each h2 tag with a font size like h1, only 2 units smaller? Nope.

Another point is the transparency of nested statements. Long-winded listings of nestings in nestings lead to an almost endless number of CSS statements that no one will have an overview of later. Not to mention old entries that are no longer needed, but are simply overlooked.

LESS is more

Well, there are more problems than I have presented that we will solve now. However, I have only gone into what I think are really essential things that bother me about CSS.

LESS is an extension to CSS, which means that all CSS code is also valid LESS code. LESS, however, offers various ways of circumventing the problems described above. But before I go into these, I would like to show you how you can use LESS at all.

There are two ways to integrate LESS into your website. One possibility is the conversion from LESS to CSS and the integration of the resulting CSS file into your website (as usual). Alternatively, the LESS file can also be included directly, in combination with LessJs, which only evaluates the stylesheets on the client side. I prefer the first option because I don’t have to rely on additional JS libraries.

If you also choose this approach, there are several ways to do the processing. There are special websites that work on a copy and paste basis, but I prefer to use something like the Gulp integration for ASP.NET Core in Visual Studio. Click here for more information.

Now that the basic structure is in place, we can start with the features themselves.

The first thing I mentioned was using variables that are missing in CSS. LESS offers this functionality, let’s look at an example.

1
2
3
4
5
6
7

@blue: #008FFF; 
@defaultFontSize: 15px; 

p { 
    color: @blue; 
    font-size: @defaultFontSize; 
}

As you can see, variables are declared with an @ character. Variables can be used for various elements, such as colors and sizes. Also, variables can be calculated by using regular arithmetic operators (this also works for colors).

My second point was the use of nested statements. LESS offers the possibility to style nested elements as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.sidebar { 
  float: left; 

  ul { 
    padding: 10px; 
    list-style-type: none; 

    a { 
      color: @link; 
      text-decoration: none; 
    } 
  } 
}

I think the result of this example is quite easy to understand. The nested CSS statements apply to HTML elements nested in the same style. The statement for the a tag therefore only applies to those elements that lie within an unordered list, which in turn lies in an element of the’sidebar’ class.

Those were all the features I really missed. But as promised, there are more: LESS offers possibilities for calculating color values, mixins, imports for distributed CSS files and own functions. I will conclude todays post with a brief comment on the individual elements:

Another feature are the so-called mixins. These allow the usage of CSS classes within statements. Let’s look at an example:

1
2
3
4
5
6
7
8

.borderAll { 
  border: 1px solid black; 
} 

.sidebar { 
  background-color: red; 
  .borderAll 
}

LESS offers predefined functions with which (color) values can be manipulated. A complete overview of available functions can be found here, but their use is identical according to the following syntax:

1

color: saturate(@green, 25%);

Finally, I would like to show you how to use import statements. You may know the include function of PHP. It’s kind of the same thing. You can use it to include other CSS or LESS files and thus distribute your instructions. If you omit the file extension, a matching LESS file is automatically searched for.

1

@import "base.css";

I am aware that this short summary is by no means a complete guide to working with LESS. But I hope that I could arouse a little interest and even make your work with CSS a little easier. As in most such topics, the same applies here: Just give it a try. By applying it you will learn the fastest. A full overview of the features can be found on the official website.