1.什么是scss的插值?
在Sass中,我们可以通过使用插值的方式来实现在“选择器名”、“属性名”以及“属性值”中插入一个“变量的值”,从而来“构造”一个新的选择器名、新的属性名以及新的属性值。
2.语法:
#{变量}
例如:插值用于"选择器名"
@for $i from 1 through 3
{
.item-#{$i}
{
width:10px * $i;
}
}
编译出来的css代码:
.item
-1
{
width
:
10px
;
}
.item
-2
{
width
:
20px
;
}
.item
-3
{
width
:
30px
;
}
例如:插值用于"属性名"
$border:border;
div
{
#{$border}-width:1px;
#{$border}-style:solid;
#{$border}-color:red;
}
编译出来的Css代码如下:
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
;
}