What is Variable Interpolation in SASS ? - Coding

SASS is a strong CSS preprocessor that adds a number of features to improve the usability and maintainability of stylesheets. Variable interpolation is one such feature that permits the dynamic insertion of variable values into selectors and properties. In this article, we will learn the variable interpolation in Sass.

Variable Interpolation

It is a SASS feature that developers can use to dynamically inject the value of a variable into selectors and properties. It can be done by utilizing the ‘#{}‘ syntax. Developers can create dynamic stylesheets by using static text with variable values via variable interpolation.

Features of Variable Interpolation using SASS:

This feature enhances code reusability, and reduces duplication, so increases developer productivity
It simplifies the management of styles by allowing the values of variables to be dynamically inserted into CSS selectors and properties.
It ensures consistency and standardization across the codebase.

Syntax:

$variable: value;

// Variable Interpolation in selectors
.#{$variable}-text {
    property: $variable;
}

// Variable Interpolation in properties
.button {
    background-color: #{$variable};
    border: 1px solid #{$variable};
}

For a detailed Installation process of the SASS in the project, refer to the Installation of SASS article.

Example 1: The code example shows how we can use the Variable Interpolation in properties and use different variables for them

index.html

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" 
          href="style.css"> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3> 
        What is variable interpolation in Sass? 
    </h3> 
    <div class="container"></div> 
</body> 
  
</html>

styles.scss:

CSS

$color: green; 
$size: 500px; 
  
h1 { 
    color: #{$color}; 
} 
  
.container { 
    width: #{$size}; 
    height: calc(700px - #{$size}); 
    background-color: #{$color}; 
}

When the above code is compiled into CSS using the SASS preprocessor:

sass styles.scss style.css

style.css:

CSS

h1 { 
    color: green; 
} 
  
.container { 
    width: 500px; 
    height: calc(700px - 500px); 
    background-color: green; 
}

Output:

Example 2: The code example shows how we can use the Variable Interpolation in properties and selectors using different variables in them:

index.html:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" 
          href="style.css"> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3> 
          What is variable interpolation in Sass? 
      </h3> 
    <div class="yellow-container box"> 
        <h2> 
            Yellow Container 
        </h2> 
    </div> 
    <div class="brown-container box"> 
        <h2> 
            Brown Container 
        </h2> 
    </div> 
</body> 
  
</html>

styles.scss:

CSS

$color: green; 
$color_1: yellow; 
$color_2: brown; 
$size: 500px; 
  
h1 { 
    color: #{$color}; 
} 
  
.box { 
    width: #{$size}; 
    height: calc(600px - #{$size}); 
} 
  
.#{$color_1}-container { 
    background-color: #{$color_1}; 
} 
  
.#{$color_2}-container { 
    background-color: #{$color_2}; 
}

When the above code is compiled into CSS using the SASS preprocessor:

sass styles.scss style.css

style.css

CSS

h1 { 
    color: green; 
} 
  
.box { 
    width: 500px; 
    height: calc(600px - 500px); 
} 
  
.yellow-container { 
    background-color: yellow; 
} 
  
.brown-container { 
    background-color: brown; 
}

Output:

Reffered: https://www.geeksforgeeks.org

CSS

Related
How to Center an Image using Tailwind CSS ?
How to Set Offset of Background Image from Right using CSS ?
CSS Media Queries - max-width or max-height
How to Add Edit and Delete Data in HTML Table using JavaScript?
How to Hide Elements in Mobile Size and Display in Laptop size using Tailwind CSS ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12