SASS 中的 `if` 函数
本文讲解 SASS 中的 if 函数。
我们将从基础到高级技巧，循序渐进地讲解 if 函数的方方面面。
YouTube Video
SASS 中的 if 函数
SASS 提供的 if() 函数是一个简单的条件函数，它根据布尔条件返回两个值之一。它类似于 JavaScript 的三元运算符。
语法
语法如下：。
1// if(condition, trueValue, falseValue)- 如果
condition为 true，则返回trueValue；为 false，则返回falseValue。
基本用法
例如，你可以使用 if() 函数根据主题是深色还是浅色来改变背景和文本颜色。
示例代码
1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7 background-color: $background-color;
8 color: $text-color;
9}- 如果
$theme变量为"dark"，则背景为黑色、文字为白色；如果为"light"，则背景为白色、文字为黑色。
生成的 CSS
1body {
2 background-color: black;
3 color: white;
4}- 由于
$theme变量为"dark"，因此背景为黑色、文字为白色。
@if 语句与 if() 函数的区别
Sass 提供用于条件分支的 @if 语句和 if() 函数，但它们用途不同。
示例代码
1$theme: "dark";
2
3// `@if` statement: Compile-time branching (syntax level)
4$background-color: null;
5@if $theme == "dark" {
6 $background-color: black;
7} @else if $theme == "light" {
8 $background-color: white;
9} @else {
10 $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17 background-color: $background-color;
18 color: $text-color;
19}@if语句在 Sass 编译时控制输出哪些代码。- 相较之下，
if()函数返回一个值，用于在表达式中动态切换取值。
生成的 CSS
1body {
2 background-color: black;
3 color: white;
4}- 在此示例中，由于
$theme为"dark"，将应用黑色背景和白色文字颜色。 - 两者的主要区别在于：
@if语句用于控制结构，而if()函数用于返回值。
使用嵌套的 if 函数
当你需要复杂分支时，可以嵌套使用 if 函数。
示例代码
1$theme: "custom";
2$custom-color: blue;
3
4$background-color: if(
5 $theme == "dark",
6 black,
7 if(
8 $theme == "light",
9 white,
10 $custom-color
11 )
12);
13
14body {
15 background-color: $background-color;
16}- 如果
$theme为"dark"，返回黑色；为"light"，返回白色；否则返回默认值（$custom-color）。
生成的 CSS
1body {
2 background-color: blue;
3}- 由于
$theme变量为custom，背景颜色为蓝色。
实际用例
主题切换
下面是一个根据主题更改按钮样式的示例。
1$theme: "dark";
2
3.button {
4 background-color: if($theme == "dark", #333, #fff);
5 color: if($theme == "dark", #fff, #333);
6 border: 1px solid if($theme == "dark", #444, #ccc);
7}- 这段代码是一个 SASS 条件示例，根据
$theme变量的值切换按钮的背景、文本和边框颜色。if()函数用于为深色和浅色主题动态设置样式。
生成的 CSS
1.button {
2 background-color: #333;
3 color: #fff;
4 border: 1px solid #444;
5}- 通过切换主题，你可以统一地更改整体设计。
高级示例：动态设置颜色对比度
我们来看一个根据背景色自动设置文本颜色的示例。
示例代码
1@use "sass:color";
2
3$background-color: #000;
4
5$text-color: if(
6 color.channel($background-color, "lightness", $space: hsl) > 50%,
7 black,
8 white
9);
10
11body {
12 background-color: $background-color;
13 color: $text-color;
14}color.channel()函数用于获取背景色的明度（lightness）。如果该值大于50%，则选择黑色；如果更小，则选择白色作为文字颜色，从而自动优化与背景的对比度。
生成的 CSS
1body {
2 background-color: #000;
3 color: white;
4}- 通过使用
if()函数，可以实现考虑无障碍设计的灵活样式，例如自动调节对比度。
与 @function 结合使用
在 @function 中使用 if 函数可以实现更灵活的样式设计。
示例代码
1@function theme-color($theme, $type) {
2 @return if(
3 $theme == "dark",
4 if(
5 $type == "background",
6 black,
7 white
8 ),
9 if(
10 $type == "background",
11 white,
12 black
13 )
14 );
15}
16
17body {
18 background-color: theme-color("dark", "background");
19 color: theme-color("dark", "text");
20}- 这段代码演示了在
@function中使用if()，根据主题和颜色类型返回合适的颜色。这使得各个主题的样式设计保持一致且可复用。
生成的 CSS
1body {
2 background-color: black;
3 color: white;
4}- 通过创建并使用基于
if()函数的辅助函数，可以提升整个项目的可维护性。
注意
-
if函数不能与动态值一起使用 由于 CSS 本身是静态语言，if函数会在编译 SASS 时就确定取值。对于运行时的条件逻辑，需要使用 JavaScript。 -
优先考虑可读性 由于嵌套的
if函数可能会变得复杂并影响可读性，可以按需使用 SASS 的@mixin和@function来组织代码。
结论
SASS 的 if 函数是一个强大的工具，可根据条件返回不同的值。它不仅适用于简单的条件判断，还可用于主题切换、动态样式设置等诸多场景。不过在处理复杂条件时，要注意可读性，并利用 @mixin 与 @function 提升可维护性。
掌握 if 函数可以实现更高效、更灵活的样式设计。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。