5.Scss的插值

Posted 2022-12-16 hou-yuan-zhen

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:#$ipx solid red;

    　　　　

　　　　　　

    编译出来的Css代码如下：

　　　　.item-1

　　　　　　

  　　　　  border: 1px solid red;

　　　　　　

　　　　.item-2

　　　　　　

   　　　　 border: 2px solid red;

　　　　　　

　　　　.item-3

　　　　　　

  　　　　  border: 3px solid red;