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:

default.less:

@color: red;
@font:20px;

style.less:

@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.

Index.html

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.

default.less

JavaScript

@color: red;
@font:20px;

Now, create another less file to import the "default. less" file.

style.less

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.

index.html

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.

default.less

JavaScript

@padding:100px;
@width:200px;
@height:20px;
@color:red;
@bg:green;
@back:yellow;

Now, create another less file to import the "default. less" file.

style.less

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

Less.js Variables Default Variables

kumarbalit8

Improve

Article Tags :

Less.js Variables Default Variables

Similar Reads

Thank You!

What kind of Experience do you want to share?