Sass插值实例讲解

在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中构造一个新的选择器名、新的属性名以及新的属性值，首先考虑的应该是使用[插值#{}]来实现。

查看更多关于Sass插值实例讲解的详细内容...