Less.js Variables Properties as Variables
Last Updated :
23 Jul, 2024
LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that the web browser can use it. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.
Description for variables:Â The variables in Less.js govern the common values used in a single location, ie, they are known to keep values stored in them and can be used anywhere within the definition of code. LESS allows you to use these variables to change the specific value in the entire code. It might get troublesome when we need to change one particular value in our CSS code, but with the help of variables, it can easily be done.
Properties as variables: In the properties as variables (NEW), You can easily treat properties like variables using the $prop syntax. Sometimes this can make your code a little lighter.
You have to note that, like variables, Less will choose the last property within the current/parent scope as being the "final" value.
Syntax:
color:$color;
Example 1: The following examples, demonstrate the use of Less.js variable properties as variables. First, we have to create an HTML file with the following code.
HTML
<!DOCTYPE html>
<head>
<link rel="stylesheet"
href="style.css" type="text/css" />
</head>
<body>
<div><br><br>
<h1 class="color">GeeksforGeeks</h1>
<h2><b>Less.js Variables Properties as Variables</b></h2>
<h3>Thank you!!!...</h3>
</div>
</body>
</html>
style.less: Create the less file with the following code.
CSS
@color:green;
@text:black;
.color
{
color: @color;
text-align: center;
}
h2
{
color: @text;
text-align: center;
}
h3
{
color:$color;
text-align:$text-align;
.color();
}
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
.color {
color: green;
text-align: center;
}
h2 {
color: black;
text-align: center;
}
h3 {
color: green;
text-align: center;
}
Output:
 Example 2: The following examples demonstrate the use of Less.js variable properties as variables. In this example, when the cursor moves to the upside then the background changes on hover.
HTML
<!DOCTYPE html>
<head>
<link rel="stylesheet"
href="style.css" type="text/css" />
</head>
<body>
<div><br><br>
<h1 class="block">GeeksforGeeks</h1>
<h2><b>Less.js Variables Properties as Variables</b></h2>
<h3 class="block .inner">Thank you!!!...</h3>
</div>
</body>
</html>
style.less: Create the less file with the following code.
CSS
@text:green;
@bg:black;
.block
{
color: @bg;
.inner
{
background-color: $color;
}
color: @text;
width: 2px dashed blue;
height: 30px solid green;
}
body
{
&:hover
{
background-color: @bg;
}
}
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
.block {
color: black;
color: green;
width: 2px dashed blue;
height: 30px solid green;
}
.block .inner
{
background-color: green;
}
body:hover
{
background-color: black;
}
Output:
Reference: https://lesscss.org/features/#variables-feature-properties-as-variables-new-
Similar Reads
Less.js Variables Default Variables LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a s
3 min read
Less.js Variables Overview The Variables in LESS.js govern the common values used in a single location, ie, they are known to keep values stored in them and can be used anywhere within the definition of code. LESS allows you to use these variables to change the specific value in the entire code. It might get troublesome when
2 min read
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
2 min read
Less.js Detached Rulesets Property / variable accessors LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a dynamic style sheet language that increases the working power of CSS. LESS is cross-browser compatible. CSS pre-processor is a scripting language that impro
3 min read
Less.js Variables Multiple & Selector LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a s
3 min read