Sass语法介绍-控制指令
1.前言
Sass 为我们提供了很多控制指令,使得我们可以更高效的来控制样式的输出,或者在函数中进行逻辑控制。本节内容我们就来讲解什么是 Sass 控制指令?它能用来做什么?它将使你更方便的编写 Sass 。
2.什么是 Sass 控制指令
控制指令,故名思义它是通过条件来控制某些逻辑的,提到条件你首先肯定想到了 if ,没错这是 Sass 控制指令的一种,除了这个还有循环,所以 Sass 一共为我们提供了 4 种控制指令,它们分别是:
- @if 指令
- @each 指令
- @for 指令
- @while 指令
如果你熟悉其他的编程语言或者你熟悉 javascript ,看见上面这四种是不是很熟悉,它们在 Sass 中也是用来做条件判断和循环的,下面我们就看一下它们如何在 Sass 中应用。
3.@if 指令
3.1 基本使用
@if 指令是在 @if 后跟一个表达式,然后再接 {} ,如果表达式为 true 则执行 {} 里的代码逻辑,写为 @if { … } ,我们来举例看下:
@mixin avatar($size, $circle: false) {
height: $size;
@if $circle {
width: $size / 2;
}
}
.square { @include avatar(100px, $circle: true); }
上面我们在 @mixin 中使用了 @if 指令,如果 @if 后面的表达式或变量为 true ,它将执行 {} 里的代码。上面的代码在 .square 的样式中使用了 @mixin ,它将会生成如下的 CSS 代码:
.square {
height: 100px;
width: 50px;
}
从上面两段代码的对比中我们看到,我们为 @mixin 传入了 $size 并且 @if 后面的变量为 true,所以它执行了 width: $size / 2 生成的 CSS 就是 width: 50px ,在这里你要重点关注 @if 指令的用法,关于 @mixin 在后面的章节我们会详细讲到,这里你可以先认识下就好。
3.2 @else 和 @else if 指令
如果你了解任何的编程语言,那么你一定知道有 if 就会有 else 和 else if ,如果 @if 后面的表达式为 false ,就会判断 @else if 后面的表达式,如果还是 false 则会继续往后走,如果所有表达式都为 false 则最终会执行 @else 后面的 {} 中的代码逻辑。
当然 @else if 和 @else是在你需要多条逻辑判断的时候写的,也可以不写,就像上面的代码一样。说了这么多可能你不是很理解,一码胜千言,我们直接将上面的代码段改造下,实际体会一下:
@mixin avatar($size, $circle: 1) {
height: $size;
@if $circle == 1 {
width: $size / 2;
} @else if $circle == 2 {
width: $size / 5;
} @else {
width: $size;
}
}
.a { @include avatar(100px); }
.b { @include avatar(100px, $circle: 2); }
.c { @include avatar(100px, $circle: 3); }
上面的代码中我有 3 条判断逻辑对应不同的代码块,然后我在 .a .b .c 中分别调用 @mixin 并传入不同的参数,转换后的 CSS 代码如下:
.a {
height: 100px;
width: 50px