Learn less in less than 5 minutes part -1

Less.js

Less, we can call it an extension for CSS. yes, you can do a lot more things which you can't do it just with CSS. Less which is stands for Leaner style sheets.

Less is a js file/tool which converts your .less file to .css files. it allows you to write your CSS more productively.




As of now let me start with the basics and will see how to configure and run it in coming posts.
let's jump into the topics and learn a couple of topics in this post.

Variables and scope  - @bgcolor @textcolor

@bgcolor: green;
@width: 20px;
body {
background-color: @bgcolor;
}
div {
width: @width;
}

Variable scope - Scope in Less is very similar to that of CSS. Variables and mixins are first looked for locally, and if they aren't found, it's inherited from the "parent" scope.

Example :

body {
div {
@bgcolor: white;
}
background-color: @bgcolor; // Color white inherited from the parent scope.
}

Even the below example works it doesn't mean that it has to be declared above that is referred. Even if it's declared below after the reference it works.

body {
background-color: @bgcolor; // Color white inherited from the parent scope. its declared after its
div {
@bgcolor: white;
}
}

Nesting

You can write nesting classes inside a particular div.

Example

<div class="cities">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="metro-cities">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div> 

suppose if you have HTML classes like the above example, you can specifically write a style for only metro-cities and its heading and paragraph.  you can easily achieve it with nesting.

it can be done using below less code and it gives you the clear code when you targeting the specific id or classes.

.metro-cities {
h2 {
font-size:30px;
}
p {
color: red;
}
}

Mixins

.background {
background-color: #D63031;
color: #EAF0F1;
text-align: center;
}

if you want to use the above properties in multiple places you can just refer it like .background() below:

.header {
height: 300px;
.background();
} 

#footer {
height:100px;
.background();
}

mixins are very useful when your application grows bigger and if you want to change the background color for the multiple webpages you can just change it one place and it will reflect in multiple webpages where the mixins are used.

Maps

Mixins and rulesets can be used as maps of values.

From the below color ruleset for primary colors which you want to use it in your app/webpages.

#primary-colors {
primary-blue: #0A79DF
primary-red: #D63031
primary-yellow: #EEC213
}

These colors can be referred to in multiple places using it as maps of values.

#header {
background-color: #primary-colors[primary-blue];
}
#footer {
color: #primary-colors[primary-red];
}