CSS is annoying and can get frustrating. As a developer, it is really annoying having to write cool functions in JS and then turn to CSS and start with background:yellow;, color:yellow;, padding:yellow, :). Although CSS is getting better with new features like variables etc, but I feel LESS is a better option. So this is a brief introduction to LESS based on what I have learnt.

So, what is LESS

LESS is not bootstrap, or anything close to that. It definitely does not let you write classes and give you magical styles. In my opinion, I feel using LESS might even increase your CSS, but you will end up with a beautiful and comfortable CSS.

LESS makes writing of CSS way easier, introducing syntax like functions, variables etc.

1. INSTALLING LESS

   You can either install it on your system, or use the LESS CDN. I prefer installing it, cause using the CDN might give unexpected behaviors.
   So to install LESS, npm install -g less.

2. WORKING WITH LESS

   Create two files. styles.less and styles.css. We will work in the LESS file which will then be converted to CSS using lessc styles.less styles.css

Note:Everything here should be written on the less file. Run lessc styles.less styles.css to see the changes in your css file

variables

To create a variable in LESS, you use the @ symbol e.g @width:50px;. and then you can use it anywhere e.g

@width:50px;
@primaryColor:red;
body{width:@multipler;}

and then run lessc styles.less styles.css in your terminal, and nice, CSS has been transformed.

Maps

Like JS objects or maps, this is a data-type in LESS. You can define values like breakpoints etc

@breakpoints: {
  desktop: 900px;
  tablet: 760px;
  phone: 480px;
};

You can then use this for your media queries

@media (min-width: @breakpoints[phone]) {
body{
width:@breakpoints[desktop];
}
 }

Math functions

You can use some Math functions like round, floor etc and Math operations like *, /. For example

h3{
 height: floor(@breakpoints[tablet] / 3);
}

Remember to run lessc styles.less styles.css to see the changes in your styles.css

Color operations

LESS provides color operations like lighten and darken, which takes your color and increases or decreases the lightness of the color based on the percentage specified

body{
 background:lighten(@primaryColor,60%);
}

Guards

Similar to if statement in js, guards is used to evaluate a style using when. For example,

body:hover when (lightness(@primaryColor)<70%){
background:green;
}

note that this will check the lightness of "red", not what we specified for the background.

Variable interpolation

This is simply using variables to set name or value. For example, I love naming my classes based on what they are used for e.g section-1-data-img,section-1-data-content,section-1-data-heading.

@section1:section-1-data;
.@section1-img{}
.@section1-content{}

Scoping in LESS

LESS also has scoping. For example, defining another value for @primaryColor inside a media query won't change the value outside the media query e.g

@media (min-width: @breakpoints[phone]) {

  @primaryColor: green;
  h2 {
   background:@primaryColor;
    height: @breakpoints[phone];
  }
}

Nested CSS rules

Nesting CSS rules with LESS is basically specificity e.g if this is our HTML

<div>
<ul>
<li><a>this is a link</a></li>
</ul>
</div>

to style the a tag in LESS

div ul li {
background:@primaryColor;
 @secondaryColor: violet;
  border: 2px solid @secondaryColor;
a{
color:blue;
font-size:25px;
}
&:hover{
background:black;
}
&{
padding:30px;
}
}

Basically, the & is used to get the whole selector. In this case div ul li:hover.

Imports in LESS

It is actually quite easy to import in LESS. You can import LESS files, CSS,PHP etc.Note that every other import require an extension except from LESS.
You can create a file called variable.less which will contain all your variables and import into styles.less

//variable.less
@primaryColor:red;
@secondaryColor:yellow;

//styles.less
@import "variable";
body{
background:@primaryColor;
}

To import css e.g fonts

@import (css)
  url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

You can even go wild and move a whole style to another file and import it into styles.less. This will import it at the exact place you specified it.

Detached rule set

Detached rule set is basically writing a property in one place and using it in other places. E.g you can define a box-shadow in one place and use it elsewhere. Detached rule set uses the @ symbol

@box-shadow:{
box-shadow:3px 3px 5px blue;
font-size:30px;
}
div{
@box-shadow();
}

The issue with Detached rule set is simply the fact that redefining a value will override every former value e.g

@box-shadow:{
background:blue;
}

This will be the only value defined in box-shadow.

Mixins

Mixins, :) this is the big fish.
Mixins is like detached rule set but better such that adding a new value will not override the former value. Mixins uses period

.font(){
font-size:40px;
}
.font(){
font-family:Arial;
}

This will merge the two together.

Parameterizing Mixins

Mixins also allow arguments and default value for arguments

.box(@width:30px;@color:@primaryColor,@style:dashed){
  border: @width @color @style;

}
// or
.box(@width:30px;@color:@primaryColor,@style:dashed){
  border: @arguments;
border-radius:@width;
}

I passed default values, just in case you decide not to put any value.

.div{
.box()
}
// or
.div{
.box(30px,brown,solid)
}

Mixins as functions

Mixins can act as functions also , receiving arguements and returning values

.arithmetic(@x,@y){
@add:@x+@y;
@multiply:@x*@y;
@divide:@x/@y;
}

Using it elsewhere

.div{
width:.arithmetic(200px,300px) [@add];
height:.arithmetic(15px,6px) [@multiply];
font-size:.arithmetic(15em,5) [@divide];
}

Personally, I feel mixins should be used in other files and then imported into the main less files for easy readability but that is me.

So....... that is LESS from my point of view with some of the major things I learnt. You can know more about LESS by reading the documentation.

Till then Adios