Less.js Mixins !important keyword

Last Updated : 28 Sep, 2022

Less.js is a CSS extension that provides some additional features to traditional CSS. The !important keyword is basically used to mark some important properties, mixins, variables, etc throughout the page as it can be difficult to track which property could be important or not so this keyword can be used to do the work. In this article, we will see the !important keyword in LESS.js.

Mixins in Less.js facilitate the mix-in of the different styling properties from existing styles. The class selectors & id selectors can be a mix-in to generate the different styling properties. The !important keyword is basically used after a mixin call in order to mark all the inherited mixin properties by it as !important for that specific class.

Syntax:

<mixin> !important;

Example 1: In this example, we will create a mixin with a parameter text color and then will use it in the header text and use the !important keyword as it could be identified for further use.

style.less

.color-mixin(@bg: #333333; @txt-color: green) { 
    background-color: @bg; 
    color: @txt-color; 
} 
  
.main { 
    height: 100px; 
    width: 500px; 
} 
  
.header { 
    border: 1px solid white; 
    height: 80px; 
    width: 100%; 
    .color-mixin() !important; 
} 
  
.footer { 
    height: 100%; 
    width: 100%; 
    .color-mixin(); 
} 

style.css: This is the compiled CSS code:

style.css

.main { 
    height: 100px; 
    width: 500px; 
} 
  
.header { 
    border: 1px solid white; 
    height: 80px; 
    width: 100%; 
    background-color: #333333 !important; 
    color: green !important; 
} 
  
.footer { 
    height: 100%; 
    width: 100%; 
    background-color: #333333; 
    color: green; 
} 

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Less.js Mixin</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <div class="main"> 
        <div class="header"> 
            <h2>!important is applied</h2> 
        </div> 
        <div class="footer"> 
            <h3>!important in not applied</h3> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will apply the !important keyword to the individually defined variables in LESS.js.

style.less

@txt-color: #00c013; 
@br-radius: 10px; 
@bg-color: gray; 
  
.main { 
    height: 100px; 
    width: 500px; 
  
    border-radius: @br-radius  !important; 
    background-color: rgb(92, 92, 92); 
} 
  
.header { 
    height: 80px; 
    width: 100%; 
    color: @txt-color  !important; 
} 
  
.footer { 
    height: 100%; 
    width: 100%; 
    background-color: @bg-color; 
} 

style.css: This is the compiled CSS code:

style.css

.main { 
    height: 100px; 
    width: 500px; 
    border-radius: 10px !important; 
    background-color: #5c5c5c; 
} 
  
.header { 
    height: 80px; 
    width: 100%; 
    color: #00c013 !important; 
} 
  
.footer { 
    height: 100%; 
    width: 100%; 
    background-color: gray; 
} 

HTML

<!DOCTYPE html> 
<html> 
 
<head> 
    <title>Less.js Mixins</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
 
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <div class="main"> 
        <div class="header"> 
            <h2> 
                !important applied for border-radius 
                and text color 
            </h2> 
        </div> 
        <div class="footer"> 
            <h3> 
                !important in not applied  
                for background color. 
            </h3> 
        </div> 
    </div> 
</body> 
 
</html>