Less.js Maps-Using variable variables in lookups

Last Updated : 28 Apr, 2025

LESS is a preprocessor of CSS that provide it with some more features to work and with the help of that, we can write more efficient CSS code. Let us have brief information about the lookups, it's just a pair of capital brackets [@lookups], the content inside the bracket is called lookups which are basically variables. Note that the value inside the brackets [@lookup] is not considered a variable, rather it will be considered a key value, so it will be used without @sign, unlike variables.

In this article, we are going to learn about using variable variables in lookups, which is part of the less.js maps.

Syntax:

.selector[@@lookup]

Parameter:

It accepts variables as parameters, followed by the existing @ sign.

Example 1: In this example, we will use the variable variables in lookups or [@@lookup] and change the color of the text.

index.html:

HTML

<!DOCTYPE html>
<html lang="en">
<head>   
    <title>Maps - variable variables in lookups</title>
    <style>
        .change_color {
            color: green;
        }
    </style>
</head>
<body>
    <div class="change_color">
        <h1>GeeksforGeeks</h1>
    </div>    
</body>
</html>

style.less:

CSS

.text-color-mixin() {
      @text_color: green;
}
  
@using-lookup: text_color;
  
.change_color {
    color: .text-color-mixin[@@using-lookup]
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be:

style.css:

CSS

.change_color {
    color: green;
}

Output:

Example 2: In this example, we will use the variable variables in lookups to change the font sizes of the different texts with the help of lookups.

index.html:

HTML

<!DOCTYPE html>
<html lang="en">
<head>   
    <title>Maps - variable variables in lookups</title>
    <style>
        .large_text {
          font-size: 50px;
        }
        .small_text {
          font-size: 20px;
        }
        .tiny_text {
          font-size: 10px;
        }
        p {
          color: green;
        }
    </style>  
</head>

<body>
    <div class="large_text">
        <p>GeeksforGeeks</p>
    </div>
    <div class="small_text">
        <p>GeeksforGeeks</p>
    </div>
    <div class="tiny_text">
        <p>GeeksforGeeks</p>
    </div>    
</body>
</html>

style.less:

CSS

.text-size-mixin() 
{
    @large-text: 50px;
    @small-text:20px;
    @tiny-text:10px;
}
  
@large-text-lookup:large-text;
@small-text-lookup:small-text;
@tiny-text-lookup:tiny-text;
@text-color:green;
  
.large_text {
    font-size: .text-size-mixin[@@large-text-lookup];
}
.small_text {
    font-size: .text-size-mixin[@@small-text-lookup];
}
.tiny_text {
    font-size: .text-size-mixin[@@tiny-text-lookup];
}
p {
    color: green;
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be:

style.css:

CSS

.large_text {
    font-size: 50px;
}
.small_text {
    font-size: 20px;
}
.tiny_text {
    font-size: 10px;
}
p {
    color: green;
}

Output:

Reference: https://lesscss.org/features/#maps-feature-using-variable-variables-in-lookups

Less.js Maps-Using variable variables in lookups

iamgaurav

Improve

Article Tags :

Less.js Maps-Using variable variables in lookups

Similar Reads

Thank You!

What kind of Experience do you want to share?