@if 这个指令，可以让我们根据一些条件，去应用特定的样式。也就是当指定的条件是真的时候，就把一些样式包含进来。先用一个 @if ... 后面加上要判断的条件 .. 然后在后面的大括号里，可以把当条件为真的时候要包含进来的样式 ... 下面通过两个例子来理解一下这个指令 ...

先去创建一段样式 ... 在这个样式里面，我们可以使用一个 border-radius 属性 ... 不过这里我们可以使浏览器的一些前缀 .. 因为比较旧版本的浏览器依赖这些前缀 ... -bdrs ... 用一个 5px 的圆角 ..

在这段样式里，我们可以用一个 @if ... 去判断一个变量的值 ... 这个变量叫做 $use-prefixes ... 如果这个变量的值是 ture ... 就把使用浏览器前缀的样式包含进来 ... 用一组花括号 ... 把这几行样式括起来 ...

在上面，我们再去定义这个变量 ... $use-prefixes ... 先把它设置成 false ... 然后保存一下 ... 在输出的结果里，你会发现，样式里面，没有包含带浏览器前缀的属性 .. 因为这些样式需要 $use-prefixes 这个变量的值是 true 的时候，才会包含进来 ...

这次我们再把这个变量的值设置成 true ... 再保存一下 ... 你会看到 ... 样式里面包含了浏览器前缀的属性 ... 因为 @if 指令判断的条件现在会返回一个真的值 ...

我们可以使用 @else 继续去判断其它的条件 ... 再看一个例子 .. 比如一个 body 选择器 ... 这个样式里面，背景颜色要根据一个变量的值去决定 ...

先用一个 @if ... 判断一下 $theme 这个变量 ... 看看它的值是不是等于 dark ... 如果是 ... 就把背景颜色设置成 黑色 ... 在这个花括号的外面 ... 再用一个 @else if ... 继续去判断一下 ... 再看一下 $theme 这个变量的值是不是等于 light ... 如果是 ... 就把背景颜色设置成 白色 ...

最后，再用一个 @else ... 如果 $theme 的值即不是 dark 也不是 light ，那么，这个背景颜色就设置成灰色 ...

$theme: dark;
body {
@if $theme == dark {
background-color: black;
} @else if $theme == light {
background-color: white;
} @else {
background-color: grey;
}
}

在上面我们再去定义 $theme 这个变量 ... 先让它等于 dark ... 保存 ... 你会看到 ... 现在这个 background-color 的值，就会是 black ...

我们再把要这个 $theme 的值，设置成 light ... 再保存 ... 现在这个背景颜色就会使用白色了 ...