5.Scss的插值

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;
　　　　　　}
posted @ 2019-10-03 10:09  Moliy-Moliy  阅读(653)  评论(0)  编辑  收藏  举报