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