Variables - ( LESS Basics )

A variable is a way to store a value or a set of values that can be used later in your code. In Less, variables start with the "@" symbol and are followed by a name and a value. In this tutorial, we'll discuss the syntax, examples, output, explanation, use, important points, and summary of variables in Less.

Syntax

The syntax for defining a variable in Less is:

@variable: value;

• @variable is the name of the variable, which must start with the "@" symbol.
• value is the value of the variable.

Example

Let's define a variable in Less:

@primary-color: #3498db;

This sets the variable "@primary-color" to the color value "#3498db".

Output

When we define a variable in Less, it doesn't produce any output by itself. We can use it later in our code to reduce repetition of the same value.

Explanation

In the example above, we defined a variable called "@primary-color" and assigned it the value of "#3498db". We can then use this variable later in our code to refer to this color value.

Use

Variables in Less are used to store values that can be used over and over again throughout your code. For example, instead of using the same color value in multiple places in your code, you can define a variable to store that value and then reference the variable instead.

@primary-color: #3498db;
.button {
  color: @primary-color;
  background-color: @primary-color;
}

In the above example, we used the variable "@primary-color" to set both the font color and background color of the ".button" class.

Important Points

• Variables in Less are case-sensitive.
• Variables can be used to store any valid Less value, such as colors, strings, numbers, or even other variables.
• Variables in Less can be defined almost anywhere in your Less code, but they must be defined before they are used.
• You can override a variable's value by redefining it later in your code.
• You can also use variables in variable names, property names, mixin names, and function names.

Summary

In this tutorial, we covered the syntax, examples, output, explanation, use, important points, and summary of variables in Less. Variables are a powerful feature of Less that allow you to define and reuse values throughout your code, reducing repetition and making your code more modular and maintainable.