在Sass中，我們可以通過使用插值的方式來實現在“選擇器名”、“屬性名”以及“屬性值”中插入一個“變量的值”，從而來“構造”一個新的選擇器名、新的屬性名以及新的屬性值。
語法：
#{變量}
說明：
插值這種方式，在Sass代碼的幾乎任何一個地方都可以插入一個值，包括選擇器名、屬性名、屬性值等。我們還是來個例子比較直觀一點。
舉例1：插值用於“選擇器名”
@for $i from 1 through 3
{
.item-#{$i}
{
width:10px * $i;
}
}
編譯出來的CSS代碼如下：
.item-1
{
width: 10px;
}
.item-2
{
width: 20px;
}
.item-3
{
width: 30px;
}
分析：
“@for $i from 1 through 3”很好理解，這表示一個從1到3的循環，在後面“Sass @for循環”這一節我們會詳細介紹。
細心的小伙伴們可能就有疑問了，我直接用下面這種插入變量的方式，不也能實現嗎？
@for $i from 1 through 3
{
.item-$i
{
width:10px * $i;
}
}
不好意思，還真不能！變量，我們一般都是用於屬性值的，是不能直接用於選擇器名中的，不然Sass會無法編譯成CSS。
舉例：插值用於“屬性名”
$border:border;
div
{
#{$border}-width:1px;
#{$border}-style:solid;
#{$border}-color:red;
}
編譯出來的CSS代碼如下：
div
{
border-width: 1px;
border-style: solid;
border-color: red;
}
分析：
由於變量只能用於屬性值，是不能直接用於屬性名的，也就是說如果我們使用下面這種方式是達不到預期效果的：
$border:border;
div
{
$border-width:1px;
$border-style:solid;
$border-color:red;
}
舉例：插值用於“屬性值”
@for $i from 1 through 3
{
.item-#{$i}
{
border:#{$i}px solid red;
}
}
編譯出來的CSS代碼如下：
.item-1
{
border: 1px solid red;
}
.item-2
{
border: 2px solid red;
}
.item-3
{
border: 3px solid red;
}
分析：
在這個例子中，如果我們用以下方式，也是達不到我們預期效果的：
@for $i from 1 through 3
{
.item-#{$i}
{
border:$ipx solid red;
}
}
這是因為border屬性的屬性值是一個列表值，而不是單純的一個數字或字符串。也就是說，如果屬性值是一個簡單數字或者字符串，我們可以使用變量的方式來實現。但如果屬性值是一個復雜的數據類型，我們就必須使用插值的方式來實現。
總而言之，如果你想要在Sass中構造一個新的選擇器名、新的屬性名以及新的屬性值，首先考慮的應該是使用“插值#{}”來實現。