Less.js Maps-Using variable variables in lookups
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>zambiatek</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>zambiatek</p> </div> <div class="small_text"> <p>zambiatek</p> </div> <div class="tiny_text"> <p>zambiatek</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
