• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

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

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部