Difference between CSS Custom Properties and Preprocessor Variables

Last Updated : 28 Jul, 2022

In this article, we will learn the difference between CSS Custom properties and Preprocessor Variables.

CSS Custom Properties: CSS custom properties are also referred to as CSS variables or cascading variables. These entities contain specific values that will be reused in the entire document & can be accessed using the var() function (e.g., color:(–primary-color);). The property name which has a prefix as –, depicts the custom properties & their value will be used in other declarations using the var() function.

It is really hard to manage the large-size styling properties. In order to handle this, custom properties allow us to declare a variable in one place, and can be referred to in multiple other places. This will reduce the effort to manage the code because we can update values easily by making changes in a single place.

Syntax:

For variable:

var( --custom-name, value )

For custom properties:

--custom-name: values;

Example 1: In the below code example, we will see how custom CSS properties work.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        /* Declare CSS custom properties 
            or CSS variables */ 
          
        :root { 
            --background-color: #dee1e3; 
            --primary-font-color: blue; 
            --heading-color: green; 
        } 
          
        body { 
            background-color: var(--background-color); 
        } 
          
        h1 { 
            color: var(--heading-color); 
        } 
          
        p { 
            color: var(--primary-font-color); 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <h3>CSS Custom Variable</h3> 
        <p>A Computer Science portal for geeks</p> 
    </center> 
</body> 
</html>

Output:

Preprocessor Variables: The style sheet in the advanced syntax are processed by the program and compiled into regular CSS style sheets, which can be used on the website. It is a CSS extension that allows using features like variables, nesting, imports, mixins, inheritance, etc, all in a CSS-compatible syntax ie., it is compatible with all the CSS versions.

Syntax:

$variable-name:variable-property;

Example 2: In the below code example, we will see how we can use preprocessor variables using SCSS variables.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
    "width=device-width, initial-scale=1"> 
    <title>GeeksforGeeks</title> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> 
    <style> 
        .title { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 class="title"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            CSS Preprocessor Variable 
        </h3> 
        <p>A computer science portal for geeks.</p> 
    </center> 
</body> 
</html>

SCSS Code:

$button-color:green;
.title{
    color:$button-color;
}

Compiled CSS Code:

.title {
    color: green; 
}

Output:

Difference between CSS Custom Properties & CSS Preprocessor Variable:

Custom Properties	Preprocessor Variables
The Custom Properties are the entities containing the specific values that will be reused in the entire document & can be accessed using the var() function. In other words, these are the simple custom properties of CSS.	The Preprocessor is a kind of program that has the ability to generate the stying properties from its own unique syntax. In other words, these are the modification of the custom property.
syntax: –variable-name;	syntax: $variable-name;
The Custom Properties can be cascade, i.e. the variables can be set inside any selectors or can override the current value, that is assigned to it. Also, it can be accessed & can modifiable using Javascript.	Preprocessor variables enable the reusability of the code snippets. For this, the tasks that are called for multiple times can be easily automated. Hence the chances of getting the error got reduced.
There is no need to use the compiler.	You must need a compiler.
No need to convert it into CSS code before use.	First, need to convert it to CSS code before use.
These are easy to use.	You need to first compile it before use.