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循环

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注