在本章中，我们将深入探讨如何使用 Sass 的 @if 控制结构来实现条件逻辑。这将使我们能够根据特定条件动态地改变样式。@if 语句可以帮助我们在不同的条件下应用不同的样式规则，从而提高代码的灵活性和可维护性。
基本用法
@if 语句允许你基于一个表达式的值来选择执行哪一段 CSS 代码。表达式的值可以是任何可以计算为布尔值的结果，例如数字比较、字符串匹配等。
-- -------------------- ---- -------
------ -----
------ -
---------- ------
--- ----- -- ---- -
------ ----
-
-在这个例子中，当变量 $size 的值等于 16px 时，.block 类中的文本颜色将会被设置为红色。
多条件判断
你可以通过添加 @else if 子句来处理多个条件分支。这样可以确保只有第一个满足条件的代码块会被执行。
-- -------------------- ---- -------
-------- ----------
---------- -
------ -----
--- ------- -- -------- -
------ -----
- ----- -- ------- -- -------- -
------ ----
- ----- -
------ ----
-
-这里，根据 $device 变量的值，.container 类的宽度会相应调整。如果 $device 是 "mobile"，宽度将是 100%；如果是 "tablet"，则宽度为 80%；否则，默认为 70%。
使用变量和函数
你也可以在条件判断中使用变量或函数来增加表达式的复杂性。例如，可以使用数学运算或者内置函数来决定条件。
-- -------------------- ---- -------
----------- -----
------- -----
---- -
------- -----
------ -------
--- ------ - ---- - ---------- -
----------------- -----
- ----- -
----------------- ------
-
-在这个例子中，.box 元素的背景颜色取决于 $width 变量加上 10px 后是否超过了 $threshold 变量的值。如果超过，则背景色为蓝色；否则，为绿色。
嵌套条件
@if 语句可以嵌套在其他控制结构中，甚至可以在同一个代码块内部进行嵌套，以便更精细地控制样式。
-- -------------------- ---- -------
------- -------
------ -----
----- -
---------- ------
--- ----- -- ---- -
------ -------
--- ------ -- ------ -
------- --- ----- ------
- ----- -
------- -----
-
-
-在这个例子中，.text 类的样式会根据 $size 和 $color 的值而变化。如果 $size 等于 16px 并且 $color 是 "blue"，那么元素还会有一个黑色的边框。
通过这些示例，我们可以看到 @if 语句在 Sass 中的强大功能以及它如何帮助我们构建更加灵活和高效的样式表。掌握这些基本概念后，你可以开始尝试更复杂的条件逻辑来优化你的前端项目。