Less variables

Less variables

Normally CSS designers are required to write down their CSS project code. This approach has become time consuming and redundant. With less developers are able to organize, modulet and make the code dynamic by adding the Less functionalities into the Less file. The less file will create a clean CSS code automatically on the run.  Just like all other common programing languages also Less has found its ways of defining Variables and Functions. In order to achieve organized and manageable stylesheet.

Variable

The Less variable starts with @ sign followed by the variable name and its definition:

@All-Links-color: red; @All-Links-color: #f00;

this variable name could be called everywhere and for whatever reason as background-color, text-color…. or we can define another color variable for a specific area, element or do some arithmetic calculation:

 

This is the Less file, style.less
header{
   background-color:@BackgroundColor;

a{
   background-color: @BackgroundColor - @All-Links-color;
}

/* End of =/ header /= container. */
}
This is the CSS( style.css ) code return, by LESS.

header {
  background-color: #414141;
  /* End of =/ header /= container. */

}
header a {
  background-color: #004141;
}

As you can see there is a change in the background-color of  > header a {background-color: #004141; } Here the hexacode is changed because of the arithmetic opration used in the above Less code.

If you want to add your style file into your project, it is not the Less file you have to add but you need to add the CSS stylesheet file. And let it rest, when you want to make changes just turn on your Less compiler and add the changes in the original Less file. As usual the Less will update and will take care of your CSS stylesheet.