Less.js Variables Default Variables
Last Updated :
28 Apr, 2025
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.
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 it can easily be done with the help of variables.
The default variable has the ability to set a variable only when it's not already set. This feature is not required because variables can be easily overridden by defining them afterward.
Syntax:
@color: red;
@font:20px;
@import "default.less";
@color:green;
@font:50px;
h2{
color: @color;
font-size: @font;
}We will understand the above concepts through examples.
Example 1: The following example demonstrates the use of the default variable in Less.js.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="style.css"
type="text/css" />
</head>
<body>
<div><br><br>
<h2>GeeksforGeeks</h2>
<h3>Learning default variables.......</h3>
</div>
</body>
</html>
Next, create the less file.
JavaScript
Now, create another less file to import the "default. less" file.
JavaScript
@import "default.less";
@color: green;
@font: 50px;
h2 {
color: @color;
font-size: @font;
}
h3 {
font-size: @font;
}
- To compile the less file to a CSS file, write the following command.
less style.less style.css
- style.css: Execute the above command, it will create the "style.css" file automatically with the following code:
CSS
h2 {
color: green;
font-size: 50px;
}
h3 {
font-size: 50px;
}
Output:
Â
Example 2: This is another example that demonstrates the use of the default variable in Less.js.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="style.css"
type="text/css" />
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<h2>Less.js Default Variables</h2>
</div>
</body>
</html>
Next, create the default. less file.
JavaScript
@padding:100px;
@width:200px;
@height:20px;
@color:red;
@bg:green;
@back:yellow;
Now, create another less file to import the "default. less" file.
JavaScript
@import "default.less";
@padding: 150px;
@width: 400px;
@height: 20px;
@color: green;
@bg: blue;
@back: black;
div {
text-align: center;
padding: @padding;
Width: @width;
height: @height;
border-color: @bg;
outline: 8px dashed @bg;
color: @color;
background-color: @back;
}
h2 {
color: white;
}
- To compile the less file to a CSS file, write the following command:
less style.less style.css
style.css: Execute the above command, and it will create the "style.css" file automatically with the following code
CSS
div {
text-align: center;
padding: 150px;
Width: 400px;
height: 20px;
border-color: blue;
outline: 8px dashed blue;
color: green;
background-color: black;
}
h2 {
color: white;
}
Output:
Â
Reference: https://lesscss.org/features/#variables-feature-default-variables
Similar Reads
Less.js Variables Properties as 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 Lazy Variables Evaluation
Less.js 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 boosts the functionality of CSS. Cross-browser interoperability is offered via LESS. CSS is improved and compiled for usa
3 min read
Shell Scripting - Default Shell Variable Value
A shell gives us an interface to the Unix system. While using an operating system, we indirectly interact with the shell. On Linux distribution systems, each time we use a terminal, we interact with the shell. The job of the shell is to interpret or analyze the Unix commands given by users. A shell
3 min read
Less.js 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
4 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 Browser Modify Variables
LESS (Leaner Style Sheets) Â is an extension or superset to the CSS, which basically enhances the abilities of normal CSS and provides it with programmable superpowers like variables, functions, loops, various methods to do certain tasks, etc. In this article, we are going to take a look at updating
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
Less.js Variable Interpolation
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. This dynamic style sheet language gives CSS more functionality. LESS provides interoperability across browsers. A programming language called CSS pre-processor is
3 min read
Less.js Variables Changing Selector Order
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