Less

I'm testing new study flow, the plan is to push myself to next level and expand my toolbox. So, I'm searching new web development technologies and trying to use them and figure out what problem they solve. I try to do this in every weekend, so this section will be called weekend projects. Every project will be in a different branch but may contain previous project code. The blog posts will not be step by step tutorials, they will be more like notes and definition about what I learned. If yo read these post, and find some mistakes - then please let me know in comments. So now let's learn less :)

About Less

What is Less?

Less is a CSS pre-processor that allows developer make CSS more maintainable by extending CSS language with new features, like variables, mixins, functions and so on. Less runs inside a node, browser, and Rhino.

Why use Less?

A developer can easily create a cleaner, cross-browser friendly CSS. More maintainable (variables). Less makes CSS modular.

I'm not going through an installation process because it depends on what operating system you use. You can check out how to do it from here: https://lesscss.org.

Basic overview

Define variables

Less allows a developer to define a variable, so it could be used in many places. To define the variable, use @ symbol and a colon.

1@light-green: #a5d6a7;

Nesting

This is my favorite part, with less you can organize code with nesting. It allows you to make CSS more module. The syntax is familiar to programmers, it's almost like creating classes.

1header {
2  h2 {
3    font-size: 20px;
4    color: @light-green;
5  }
6}

Less provides also a way to nest directives.

1.wrapper {
2  @media screen {
3    color: dodgerblue;
4  }
5  @media (min-width: 1024px) {
6    color: lightseagreen;
7  }
8}

Mixins

Mixins are a group of properties, that allows you to use another class properties. They are like functions in a programming language.

1.notification {
2  p {
3    color: #fff;
4  }
5
6  text-align: center;
7  border: 2px solid @border-color;
8  background: @notifications-bg;
9  margin: 10px;
10  width: 30%;
11}
12
13.notification-sm {
14  .notification;
15  font-size: 20px;
16  padding: 10px;
17}
18
19.notification-md {
20  .notification;
21  font-size: 30px;
22  padding: 20px;
23}

Operations

Here is an example of simple operation.

1@btn-text: #fff;
2@btn-padding: 50px;
3@btn-with: 120px;
4
5.btn {
6  background: @btn-bg;
7  color: @btn-text;
8  padding: @btn-padding;
9  width: @btn-with;
10  text-align: center;
11}
12
13.btn-sm {
14  .btn;
15  padding: @btn-padding - 35;
16}
17
18.btn-lg {
19  .btn;
20  padding: @btn-padding + 10;
21  background: @btn-bg * 2;
22}

I'm not going to be more specific about Less because I'm running out of time. But If you are interested, go check out their website - they have pretty good documentation. I played an hour with less and here is my end result of this project is custom 404 (link's are down below).

At the end, I would say I'm going to start using this in my everyday life from now because it's makes writing CSS easier and faster. The code looks clean and maintainable, so go and check it out, maybe you will like this too.