1. What is scss interpolation?
In Sass, we can be implemented using interpolation inserted a "value of the variable" in the "Selector name", "property name" and the "attribute value", thereby to "structure" a new selector name, the new property name and the new property value.
2. Syntax:
#{variable}
For example: interpolation for "Selector name"
@for $i from 1 through 3
{
.item-#{$i}
{
width:10px * $i;
}
}
Compiled by the css code:
.item-1
{
width: 10px;
}
.item-2
{
width: 20px;
}
.item-3
{
width: 30px;
}
For example: interpolation for "property name"
$border:border;
div
{
#{$border}-width:1px;
#{$border}-style:solid;
#{$border}-color:red;
}
Compiled by the Css code is as follows:
div
{
border-width: 1px;
border-style: solid;
border-color: red;
}
Note: The variables can only be used for property values, it can not be directly used for attribute names
Example: for the Interpolation "attribute value"
@for $i from 1 through 3
{
.item-#{$i}
{
border:#{$i}px solid red;
}
}
Compiled by the Css code is as follows:
.item-1
{
border: 1px solid red;
}
.item-2
{
border: 2px solid red;
}
.item-3
{
border: 3px solid red;
}