DEV Community

Fakorede Damilola
Fakorede Damilola

Posted on

Beginner's guide to LESS

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;}
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

You can then use this for your media queries

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

Math functions

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

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

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%);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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{}
Enter fullscreen mode Exit fullscreen mode

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];
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

To import css e.g fonts

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

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();
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

.div{
.box()
}
// or
.div{
.box(30px,brown,solid)
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Using it elsewhere

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

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

Discussion (2)

Collapse
oluwakeyejohn profile image
Oluwakeye John

Nice article 👍. I've not used LESS before. But according to reviews and all, SCSS seems to be better..

Collapse
fakorededamilola profile image
Fakorede Damilola Author • Edited on

Thanks. I have never actually tried using SCSS, but I will definitely go through it.