What is Variable Interpolation in SASS ?
Last Updated :
11 Sep, 2023
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
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>
|
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
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:
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>
|
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
CSS
h1 {
color: green;
}
.box {
width: 500px;
height: calc(600px - 500px);
}
.yellow-container {
background-color: yellow;
}
.brown-container {
background-color: brown;
}
|
Output:
Share your thoughts in the comments
Please Login to comment...