Open In App

Less.js Maps-Using variable variables in lookups

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 02 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads