Learn Less variable, nesting, mixins and more then start using it on a real project.

by Mahenda J April 24, 2020 0 Comments
Learn Less variable, nesting, mixins and more then start using it on a real project.

Welcome to this article, where you will learn some important things that will help you throughout the journey to increase your knowledge about Less.

Less is a CSS pre-processor. CSS pre-processor is a scripting language that extends common CSS to be able to use features like variable, nesting, mixins, function, expression and many more. When using a CSS pre-processor it is more likely to reduce the size of the CSS file and allow you to write clean and easily maintainable code. The most popular CSS pre-processors are such as Less, Sass & Stylus. Let's look more about Less.

In this article we will use the following guide;
  1. Less Installation.
  2. Less variable.
  3. Less nesting feature.
  4. Less mixins feature.
  5. Less the mathematical operation.
Less installation
Less needs to be changed to normal CSS when loading a web page, and the work is done by Less compiler. To use Less, you must do a Less compiler installation in your computer. Less installation can be done in two ways, first, by using npm that comes with node-js software. second, by using a direct javascript file that works like Less compiler within your browser.

If you are going to use NPM, make sure you have installed node-js on your computer, to do that, go to the node-js website nodejs.org then download node-js and do the installation, when you have finished the installation processes, open cmd and run the following command to install Less compiler.

npm install -g less

If you are going to use a javascript file then include the javascript file in the between the <head></head> tag as shown below.

<head>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"></script>
</head>

To perform compilation if you have used the first method ie NPM then run the following command within the directory where Less file is available. Note the less file should have .less extension ie. file_name.less

lessc file_name.less file_name.css

To perform compilation if you have used the second method, then open the HTML file in the browser and when you inspect any element you will find there is a standard CSS i.e. Less already compiled and all content on the web page has been styled.

The HTML file should look like this one:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Less file -->
    <link rel="stylesheet/less" type="text/css" href="file_name.less" />
    <!-- less compiler script-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
    <title>ubongofaidas</title>
  </head>
  <body>
     <!--other content goes here-->
  </body>
</html>
Less ariables
When you declare Less variable you must start with the @ symbol and then the name of that variable.
You can declare Variable in two forms namely globally and locally, a Less global variable is written out of curly braces {} and you can use it anywhere within Less file while a Less local variable is written within the curly braces and this can't be accessed outside of the curly braces. Let's look at an example;

/*variable declaration*/
@font-color: #ffffff;
@background-color: #000000;
@text-aligh: center;
@height: 300px;
@margin: 0;
body{
    margin: @margin;
}
.main-menu{
    background: @background-color;
}
.main-menu li a{
    color: @font-color;
}
.header-banner{
    height: @height;
    text-align: @text-aligh;
}

This is a Less file containing variables that have been used in two different classes namely the main-menu and the header-banner, as you can see it is easy to edit any property with just a variable, and you do not need to search for the property individually.

Less nesting feature.
If you use normal CSS to decorate element containing other elements, meaning that, you have a parent and children element then you may duplicate the parent element or class every time, so by using a Less nesting style will not be the same. Let's look at an example;

Normal CSS file for styling menu.

.main-menu {
  background: #000000;
}
.main-menu li {
  display: inline-block;
  padding: 10px;
}
.main-menu li a {
  color: #ffffff;
  text-decoration: none;
}
Less file for styling menu.

@font-color: #ffffff;
@background-color: #000000;
.main-menu{
    background: @background-color;
 li{
      display: inline-block;
             padding: 10px;
  a{
     color: @font-color;
     text-decoration: none;
  }
 }
} 
Less mixins feature.
Mixins are ways to use CSS properties found in one or more classes by including that class in another class within the Less file.
For example, add background class in the header-banner in the Less file.

.background{
      background: #e64646;
}
.header-banner{
     .background;
     height: 300;
     text-align: center;
     margin: 0;
}
Less the mathematical operations
Mathematical operations are addition, subtraction, multiplication and division, mathematical operations are very important when you want to make some changes to the variable you want to use to get the desired result. Just look at how Less works with mathematical operations. For example,

@font-color: #dd0202;
@background-color: #a70303;
@height: 500px;
@width: 90%;
.header-banner{
     width: @width + 10%;
     height: @height - 100;
     color: @font-color * 2;
     background: @background-color / #0c8829;
}

If you want to know more about less go here lesscss.org

0 Comments