SASS 中的条件判断
本文讲解 SASS 中的条件判断。
我们通过实际示例，清晰讲解从基础到进阶的条件判断用法，包括 @if、@else if 和 @else 指令。
YouTube Video
SASS 中的条件判断
SASS 是对 CSS 的扩展型样式表语言，你可以使用条件判断灵活控制样式。在 SASS 中，可以使用 @if、@else if 和 @else 在编译时切换样式的输出。
基本条件语法
SASS 中的基本条件写法如下。
1@if condition {
2 // Code executed when the condition is true
3} @else if condition {
4 // Code executed when another condition is true
5} @else {
6 // Code executed when all conditions are false
7}@if会先判断第一个条件，如果为假，则按顺序评估@else if或@else代码块。
简单的条件示例
在以下示例中，背景颜色会根据 $theme 变量进行切换。
1$theme: "dark";
2
3body {
4 @if $theme == "dark" {
5 background-color: #333;
6 color: #fff;
7 } @else if $theme == "light" {
8 background-color: #fff;
9 color: #000;
10 } @else {
11 background-color: #f0f0f0;
12 color: #333;
13 }
14}编译后的 CSS
1body {
2 background-color: #333;
3 color: #fff;
4}- 当
$theme为"dark"时，将应用深色背景和白色文字。
将条件与计算结合
条件判断不仅能处理字符串和颜色比较，还能处理数值计算。
1$width: 1200px;
2
3.container {
4 @if $width > 1000px {
5 max-width: 1200px;
6 } @else {
7 max-width: 800px;
8 }
9}编译后的 CSS
1.container {
2 max-width: 1200px;
3}- 也可以进行数值比较，当
$width超过 1000px 时，将输出max-width: 1200px。
嵌套条件
通过嵌套条件判断，可以表达更复杂的条件。
1$theme: "dark";
2$size: "large";
3
4button {
5 @if $theme == "dark" {
6 background-color: #000;
7 color: #fff;
8
9 @if $size == "large" {
10 padding: 20px;
11 } @else {
12 padding: 10px;
13 }
14 } @else {
15 background-color: #fff;
16 color: #000;
17
18 @if $size == "large" {
19 padding: 15px;
20 } @else {
21 padding: 8px;
22 }
23 }
24}编译后的 CSS
1button {
2 background-color: #000;
3 color: #fff;
4 padding: 20px;
5}- 通过嵌套条件，可以基于主题和尺寸同时进行样式设置。
在自定义函数中使用条件
在自定义函数中使用条件判断可以提升复用性。
1@function adjust-color($theme) {
2 @if $theme == "dark" {
3 @return #333;
4 } @else if $theme == "light" {
5 @return #fff;
6 } @else {
7 @return #ccc;
8 }
9}
10
11.card {
12 background-color: adjust-color("dark");
13}编译后的 CSS
1.card {
2 background-color: #333;
3}- 将条件逻辑封装到函数中，可以提高复用性与可维护性。
实用示例——切换设计
我们来看一个根据特定条件切换整体设计的示例。
1$theme: "light";
2
3body {
4 font-family: Arial, sans-serif;
5
6 @if $theme == "dark" {
7 background-color: #121212;
8 color: #e0e0e0;
9 } @else if $theme == "light" {
10 background-color: #f9f9f9;
11 color: #333;
12 } @else {
13 background-color: #fff;
14 color: #000;
15 }
16}
17
18header {
19 @if $theme == "dark" {
20 border-bottom: 1px solid #333;
21 } @else {
22 border-bottom: 1px solid #ccc;
23 }
24}编译后的 CSS
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f9f9f9;
4 color: #333;
5}
6
7header {
8 border-bottom: 1px solid #ccc;
9}- 可以根据主题变量动态切换整页的配色方案。
注意事项与最佳实践
在使用 SASS 条件语句时，可以考虑以下几点。
-
保持条件简洁
复杂的嵌套会损害可读性，因此借助函数和 mixin（混入）有助于保持简洁。
-
通过变量和函数抽象
如果在多个地方使用相似的条件，将其整合为变量或函数可以提升可维护性。
-
避免臃肿的逻辑
尽量统一设计规则，避免过度使用条件判断。
结论
SASS 中的条件判断是创建灵活、动态样式的非常有效的工具。在这里，我们循序渐进地讲解了从基础到实用示例的一切。在真实项目中使用条件判断时，要注重可复用的代码设计，同时避免过度复杂化。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。