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;
      }
02-13 22:28