Sass

2024-06-08 17:32| 来源: 网络整理| 查看: 265

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。

假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示：

@mixin blockOrHidden($boolean: true) { @if $boolean { display: block; } @else { display: none; } } .block { @include blockOrHidden; } .hidden { @include blockOrHidden(false); }

编译成css如下：

.block { display: block; } .hidden { display: none; }

再来一个例子：

@mixin border-radius($radius) { @if $radius > 3 { border: $radius dotted red; } @else { border: $radius solid blue; } } .red { @include border-radius(5px); } .blue { @include border-radius(2px); }

编译成css如下：

.red { border: 5px dotted red; } .blue { border: 2px solid blue; }

【本文地址】

公司简介

联系我们