What is @apply in CSS ?

Last Updated : 13 Jul, 2022

In this article, we will see the @apply rule property in CSS. This rule is used to implement a bunch of CSS properties which is already been declared in a variable like a method in JAVA. In simple words, we will make a set of CSS properties and store them into a variable for later use and we can use these properties as much time as we want.

Syntax:

/* outer page */
x-component {
  --heading-style: {
    color: red;
    text-decoration: underline;
    font-weight: bold;
  };
}
/* shadow DOM stylesheet */
.heading {
  @apply(--heading-style);
}

Why @apply rule was removed?

It has been removed because by using the @apply rule, we can only use the static properties which already been declared and we are just using them everywhere. In a webpage, there are various components that are different from other components and we want different custom CSS properties and then we have to make more variables. Making more and more variables to use is not an efficient approach. The efficient approach is to use the same classes where we want the same CSS properties.

Note: The below code will not run because this rule has been removed from the browsers.

Example 1: In the below example, we will see the use of the @apply rule.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS @apply Rule</title> 
    <style> 
        :root { 
            --gfg: { 
                background-color: lightgreen; 
                border-radius: 4px; 
                border: 1px solid black; 
                color: green; 
            } 
            ; 
            --comp-gfg: { 
                color: grey; 
            } 
            ; 
        } 
          
        .head { 
            @apply --gfg; 
        } 
          
        .head-comp { 
            @apply --comp-gfg; 
        } 
    </style> 
</head> 
  
<body style="text-align:center"> 
    <h1 class="head"> 
        GeeksforGeeks 
    </h1> 
    <h3 class="head-comp"> 
        A computer science portal for geeks 
    </h3> 
</body> 
</html>

Explanation: From the example, we can notice that the style property is not been reflecting on the webpage. It is because the @apply rule has been removed from the browsers. So it will not run in browsers.

Output:

Example 2: In the below example, we will make use of simple classes instead of using @apply rule.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Implementing simple class in CSS</title> 
    <style> 
        .gfg { 
            background-color: lightgreen; 
            border-radius: 4px; 
            border: 1px solid black; 
            color: green; 
        } 
          
        .comp-gfg { 
            color: grey; 
        } 
    </style> 
</head> 
  
<body style="text-align:center"> 
    <h1 class="gfg">GeeksforGeeks</h1> 
    <h3 class="comp-gfg"> 
        A computer science portal for geeks 
    </h3>  
</body> 
</html>