We continue on our LESS articles series, today we learn about LESS Variables. If you haven’t read Learning LESS: An Introduction, be sure to read that first to cover some intro to this topic.

LESS Articles Details:

1. Introduction to LESS
2. Working with Variables
3. Working with Mixins
4. Working with Nested Rules
5. Working with Functions


So Let’s get started with LESS Variables.

 Syntax of LESS Variable

The syntax for LESS is just like CSS. it fully compatible with CSS which means you can write CSS in your LESS files. You have just need to write your LESS files names as .less instead of .css

The LESS Variables

The variables in LESS starts with the @ sign.It can be any combination of letters and numbers, dashes, hyphen and underscores. After defining your variable, just follow with a colon similar to CSS and define the variable. The variable values can include a hex code for a color or a string enclosed in quotes. Let’s take a look at a few variables and see how they’ll render once they’re parsed or compiled.

  1. @bodyBackgroundColor:#00HR5E;  
  2. @bodyFontSize: 15px;  
  3. @fontFamily:“Times New Roman”,Georgia,Serif;  
  5. body{  
  6.     background-color:@bodyBackgroundColor;  
  7.     font-size:@bodyFontSize;  
  8.     font-family:@fontFamily;  
  9. }  

When the above code is compiled, we get this.

  1. body{  
  2.     background-color:#00HR5E;  
  3.     font-size:15px;  
  4.     font-family:“Times New Roman”,Georgia,Serif;  
  5. }     

It is also possible to define variables with a variable name:

  1. @webDev: “I am web developer.”;  
  2. @var: ‘webDev’;  
  3. content: @@var;  

When the above code is compiled, we get this.

  1. content“I am web developer.”;  

This concludes variables lesson in LESS, as it was a shorter lesson but extremely useful if you practicing some on your own.

In the next LESS articles series, we’ll learn about Mixins which is a one of the most important in LESS.