编辑“︁CSS条件语句”︁（章节）

= CSS条件语句 =

CSS预处理器（如Sass、Less和Stylus）通过引入'''条件语句'''（Conditional Statements）扩展了原生CSS的功能，允许开发者根据特定条件动态生成样式。本条目将详细解释CSS预处理器的条件语句概念、语法和实际应用。

== 概述 ==
条件语句是编程中的基础结构，用于基于不同条件执行不同的代码块。在CSS预处理器中，条件语句使样式表具备逻辑判断能力，例如：
* 根据主题变量切换颜色
* 响应不同浏览器前缀
* 控制混合宏（Mixins）的输出

主要预处理器的条件语句实现方式：
* '''Sass/Less''': <code>@if</code>, <code>@else if</code>, <code>@else</code>
* '''Stylus''': <code>if</code>, <code>else if</code>, <code>else</code>

== 语法详解 ==
=== Sass 示例 ===
<syntaxhighlight lang="scss">
$theme: 'dark';

.button {
  @if $theme == 'dark' {
    background: black;
    color: white;
  } @else if $theme == 'light' {
    background: white;
    color: black;
  } @else {
    background: gray;
    color: blue;
  }
}
</syntaxhighlight>

'''输出CSS'''：
<syntaxhighlight lang="css">
.button {
  background: black;
  color: white;
}
</syntaxhighlight>

=== Less 示例 ===
<syntaxhighlight lang="less">
@size: large;

.text {
  & when (@size = large) {
    font-size: 24px;
  }
  & when (@size = medium) {
    font-size: 16px;
  }
  & when (@size = small) {
    font-size: 12px;
  }
}
</syntaxhighlight>

'''输出CSS'''（当<code>@size: large</code>时）：
<syntaxhighlight lang="css">
.text {
  font-size: 24px;
}
</syntaxhighlight>

== 逻辑运算符 ==
预处理支持以下逻辑运算符：
{| class="wikitable"
! 运算符 !! 描述 !! 示例
|-
| <code>==</code> || 等于 || <code>@if $var == 10</code>
|-
| <code>!=</code> || 不等于 || <code>@if $var != red</code>
|-
| <code>></code> || 大于 || <code>@if $width > 100px</code>
|-
| <code>and</code> || 逻辑与 || <code>@if $a and $b</code>
|-
| <code>or</code> || 逻辑或 || <code>@if $x or $y</code>
|-
| <code>not</code> || 逻辑非 || <code>@if not $flag</code>
|}

== 实际应用案例 ==
=== 响应式断点控制 ===
<syntaxhighlight lang="scss">
@mixin respond-to($breakpoint) {
  @if $breakpoint == phone {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == tablet {
    @media (max-width: 900px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 901px) { @content; }
  }
}

.header {
  font-size: 2rem;
  @include respond-to(phone) {
    font-size: 1.5rem;
  }
}
</syntaxhighlight>

=== 主题切换系统 ===
<mermaid>
graph TD
    A[用户选择主题] --> B{主题类型?}
    B -->|dark| C[应用深色变量]
    B -->|light| D[应用浅色变量]
    B -->|custom| E[加载自定义配置]
</mermaid>

对应Sass实现：
<syntaxhighlight lang="scss">
@mixin theme-colors($theme) {
  @if $theme == 'dark' {
    background: #333;
    color: #fff;
  } @else {
    background: #fff;
    color: #333;
  }
}

body {
  @include theme-colors('dark');
}
</syntaxhighlight>

== 高级用法 ==
=== 在循环中使用条件 ===
<syntaxhighlight lang="stylus">
for $i in 1..12
  .col-{$i}
    width: (100% / $i)
    @if $i > 6
      font-size: 14px
    @else
      font-size: 16px
</syntaxhighlight>

=== 数学条件判断 ===
使用<math>公式</math>计算：
<math>
\text{fluid-size} = \begin{cases} 
16px & \text{当 } viewport < 400px \\
(4vw + 8px) & \text{当 } 400px \leq viewport \leq 1200px \\
24px & \text{当 } viewport > 1200px 
\end{cases}
</math>

Sass实现：
<syntaxhighlight lang="scss">
@function fluid-size($viewport) {
  @if $viewport < 400px {
    @return 16px;
  } @else if $viewport > 1200px {
    @return 24px;
  } @else {
    @return calc(4vw + 8px);
  }
}
</syntaxhighlight>

== 常见问题 ==
* '''Q''': 条件语句会增加CSS文件体积吗？<br/>
  '''A''': 不会，预处理器会在编译时评估条件，最终CSS只包含匹配的样式。

* '''Q''': 能否在原生CSS中使用条件逻辑？<br/>
  '''A''': 原生CSS通过<code>@supports</code>和CSS变量可以实现有限的条件判断，但远不如预处理器灵活。

== 最佳实践 ==
1. 将复杂条件逻辑封装在mixin或function中
2. 使用有意义的变量名（如<code>$is-dark-theme</code>而非<code>$flag</code>）
3. 避免嵌套超过3层的条件判断
4. 配合<code>@error</code>指令验证输入（Sass）

<syntaxhighlight lang="scss">
@mixin border-radius($value) {
  @if type-of($value) != number {
    @error "border-radius需要数字值，收到的是 #{type-of($value)}";
  }
  border-radius: $value;
}
</syntaxhighlight>

== 参见 ==
* [[CSS变量]]
* [[混合宏(Mixins)]]
* [[循环语句(Loops)]]

[[Category:CSS预处理器]]
[[Category:样式表语言]]

[[Category:编程语言]]
[[Category:CSS]]