Sass进阶篇

1、Sass的控制命令

@if

Sass中的@if类似于Javascript中的if，它可以根据条件来处理样式快，如果条件为true是返回一个样式块，为false时返回另一个样式快。在Sass中除了@if之外，还可以配合 @else if 和 @else 一起使用。

例如：要控制一个元素的显示和隐藏，那么我们可以定义一个混合宏，通过 @if 和 @else 来根据传进去的参数控制 display的值，如下所示：

/*
 定义一个是否显示的混合宏
 $isBlock:true 表示未传参时，$isBlock变量的默认值为true
 */
@mixin isBlock($isBlock:true) {
  @if $isBlock {
    /* 当$isBlock变量为true时，所显示的样式 */
    display: block;
  }
  @else {
    display: none;
  }
}

.block {
  /* 调用声明的混合宏 */
  @include isBlock()
}

.hidden {
  /* 调用声明的混合宏并传入参数 */
  @include isBlock(false)
}

效果图：

@for循环