什么是 SASS？
SASS（Syntactically Awesome Style Sheets）是一种预处理器语言，它是 CSS 的扩展语言。SASS 提供了许多有用的功能和工具，如变量、嵌套、混合、继承、函数等，这些功能可以帮助前端开发者更加高效地编写样式。
@if/@else 条件语句
SASS 中的条件语句 @if/@else 可以根据指定的条件来判断是否执行某些样式规则。@if/@else 语句的基本语法如下：
--- ----------- - -- ---------------- - ----- - -- ----------------- -
其中，<condition> 是一个表达式，可以是任何可以求值为布尔值的表达式，例如：
--- ------ -- --- - ------ ---- - ----- - ------ ----- -
在这个例子中，如果变量 $color 的值等于 red，则会应用 color: red; 样式规则，否则会应用 color: blue; 样式规则。
除了基本的 @if/@else 语句外，SASS 还提供了三种特殊的条件语句，分别是 @if/@else if、@if/@else if/@else 和 @if not。下面我们将详细介绍这三种语句的用法。
@if/@else if
@if/@else if 语句可以用来判断多个条件，语法如下：
--- ------------ - -- ---- - ------------ - ----- -- ------------ - -- ---- - ------------ - ----- - -- ------------------ -
例如：
--- ----- -- ----- - ---------- ----- - ----- -- ----- -- ------ - ---------- ----- - ----- -- ----- -- ----- - ---------- ----- - ----- - ---------- ----- -
在这个例子中，根据变量 $size 的值来判断字体大小，如果 $size 的值是 small，则应用 font-size: 12px; 样式规则，如果 $size 的值是 medium，则应用 font-size: 16px; 样式规则，以此类推。
@if/@else if/@else
@if/@else if/@else 语句可以用来判断多个条件，与 @if/@else if 语句不同的是，@if/@else if/@else 语句可以有一个默认的分支。语法如下：
--- ------------ - -- ---- - ------------ - ----- -- ------------ - -- ---- - ------------ - ----- - -- ------------------ -
例如：
--- ------ -- --- - ------ ---- - ----- -- ------ -- ---- - ------ ----- - ----- -- ------ -- ----- - ------ ------ - ----- - ------ ------ -
在这个例子中，如果变量 $color 的值是 red，则应用 color: red; 样式规则，如果 $color 的值是 blue，则应用 color: blue; 样式规则，以此类推。如果变量 $color 的值既不是 red，也不是 blue，也不是 green，则应用 color: black; 样式规则。
@if not
@if not 语句可以用来判断条件是否不成立。语法如下：
--- --- ----------- - -- ----------------- - ----- - -- ---------------- -
例如：
--- --- ---------- - -- ------------------ - ----- - -- ----------------- -
在这个例子中，如果变量 $is-mobile 的值为假，则应用 not-mobile 样式规则，否则应用 mobile 样式规则。
总结
SASS 中的条件语句 @if/@else 可以根据指定的条件来判断是否执行某些样式规则。除了基本的 @if/@else 语句外，SASS 还提供了三种特殊的条件语句，分别是 @if/@else if、@if/@else if/@else 和 @if not。这些条件语句可以帮助前端开发者更加高效地编写样式，提高开发效率。
示例代码：
------ ------ --- ----- -- ----- - ---------- ----- - ----- -- ----- -- ------ - ---------- ----- - ----- -- ----- -- ----- - ---------- ----- - ----- - ---------- ----- - ------- ---- --- ------ -- --- - ------ ---- - ----- -- ------ -- ---- - ------ ----- - ----- -- ------ -- ----- - ------ ------ - ----- - ------ ------ - ----------- ------ --- --- ---------- - -- ------------------ - ----- - -- ----------------- -
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65dcdc6d1886fbafa4a2f8f3