Sass控制指令

Sass提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到

@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码

p {
  @if 1+1==2 {
    border: 1px solid;
  }
  @if 5 < 3 {
    border: 2px dotted;
  }
  @if null {
    border: 3px double;
  }
}

@for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2px * $i;
  }
}

效果展示

<div id="content">
  <p>111</p>
  <ol>
    <li>21</li>
    <li>22</li>
    <li>23</li>
  </ol>
</div>

#content {
  p {
    @if 1+1==2 {
      border: 1px solid red;
    }
    @if 5 < 3 {
      color: pink;
    }
  }
  ol {
    li {
      list-style: none;
      @for $i from 1 through 3 {
        &:nth-child(#{$i}) {
          font-size: 12px * $i;
        }
      }
    }
  }
}

轻松一刻 🎧

音乐

音乐

视频教程 🎥

A video

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。