Why Variables in LESS

In CSS, if you are using same value like color, font names or any css values across multiple places or files, you have to use same value repeatedly in multiple places

For example, Let’s see declare css file with blue as primary color for headers.

.header1 {
  font-size:24px;
  color: blue;
}
.header3 {
  font-size:20px;
  color: blue;
}
.header3 {
   font-size:16px;
  color: blue;
}

In the above, color:blue is repeatedly used in three selectors - header1,header2, header3.

You want to test or change the primary color to grey, You need to change in three places.

To avoid this, LESS introduced variables feature. Variables are declared and defined once, assigned the value to variable and these can be used in multiple places or files.

variables provides reusability and maintainability for multiple modules

This enables Declare variable with value once and , reuse many times.

When you are designing styles or templates, All the variables are defined in a afile, reuse this in files by import .

This provides variable value to be changes and the changes are reflected in multiple files wherever variables are being user.

Variables in LESS are declared using at the rate of (@) symbol

Syntax

@variable-name: variabl-value

Variables are prefixed with @ symbol and separated by colon with value of the variable, end of line must be semicolon(;) symbol

Following are points to be noted for variable declaration

  • variable names contains hyphen(-) or underscore)(_) are interchangeable
  • Variable declaration and assignment must end with semicolon
  • variable scope is nested only
  • can be used as a property names
  • variable values are overwritten by new value in local scope
  • variable value contains font names color codes,

Let’s see how variable can be created

In the below example, color-green variable is declared and assigned with value green.

$color-green:green;

whenever blue color is required, We can reuse the value across multiple places

p{
background: $color-blue;
}

When LESS compiler complied the above codes, variable are replaced with their values in csss snippets, The output is CSS file with below content as follows

p {
  background: blue;
}

color variables assigned other variables

Instead of assigning values, we can also assign other variables

$font-color:red;

$link-color:$font-color;

h2{
color: $font-color
}
a{
color: $link-color
}

Generated CSS output after compilation

h2 {
  color: red;
}

a {
  color: red;
}

multiple font values assigned to single variable

values can be color strings or number but also can be assigned with multiple values

$primary-font:("Sans",'Muli');


h2{
font-family: $primary-font
}

output is

h2 {
  font-family: "Sans", "Muli";
}

interpolation with CSS properties names

variables also can be used as html property names using interpolation syntax #{}

Enclose the variable with parenthesis prefixed with hash symbol

Example

$primary-font:("Sans",'Muli');

$name: wrapper;
$attribute:border;

li.#{$name}{
#{$attribute}-radius:5px;
font-family:$primary-font;
}

compiled output css is

li.wrapper {
  border-radius: 5px;
  font-family: "Sans", "Muli";
}

Arithmetic operations on numbers not on strings

Arithmetic operations like division ,addition etc can be applied to variables of number types, operations on strings are not allowed

$height:1000px;
aside{
width :$height/3; // division operator
border-radius :ceil($height/3); // functions can be used
height: (1024px/3); // division
margin-right: 10px+4px/2px; // plus operation first, next divisiotn
font-size: 12px/4px; // Plain value, No arthematic operation
}

Output is

aside {
  width: 333.3333333333px;
  border-radius: 333px;
  height: 341.3333333333px;
  margin-right: 12px;
  font-size: 12px/4px;
}

LESS constants

LESS modules defines the predefined variable, called constants, these variables are not changed and act as constants For example math module has variables called constants which are not changeable, can only used in multiple places.

@use "sass:math" as math;
// this will give compilation failure
math.$e: 0;

Compilation gives failure message

Error: Cannot modify built-in variable.

LESS variables Scope

Scope is the usage of variable at multiple places with limitations. It can be default or global scope Variables are scoped in nested level of its declaration.

Variables can be of two types

  • Global variable are declared with !global keyword, ie global scope
  • local variables are declared under block level ie declared inside parenthesis{} over written top variable value

Default scope variable usage

Global variables can be overwritten with local variable of same name Example

$primary-color: green;// global variable

.h1 {
  $primary-color: blue; // local variables
  background-color: $primary-color;
}

.p {
  background-color: $primary-color;
  }


.h1 {
  background-color: blue;
}

.p {
  background-color: green;
}

Global variable scope usage

$primary-color: green;// global variable

.h1 {
  $primary-color: blue !global; // local variables
  background-color: $primary-color;
}

.p {
  background-color: $primary-color;
  }

And output generated

.h1 {
  background-color: blue;
}

.p {
  background-color: blue;
}

Variable Advantages

  • Reusability
  • declare or update once, change in multiple places
  • uniform style design
  • clear separation of components when multiple teams are working