0Pricing
CSS Academy · 课时

Sass 函数与控制流

使用 Sass 内置函数、@if、@each 和 @for 指令编写动态 CSS 逻辑。

Sass 函数与控制流 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

Sass 内置函数

Sass 提供许多用于颜色处理、数学运算、字符串操作等功能的内置函数。这些函数在编译时运行。

<div class="darker">darken($base, 15%)</div>
  <div class="lighter">lighten($base, 15%)</div>
  <div class="faded">transparentize($base, 0.5)</div>
  <div class="mixed">mix($base, white, 60%)</div>

颜色函数

主要的 Sass 颜色函数：

  • darken($color, $amount)
  • lighten($color, $amount)
  • saturate($color, $amount)
  • mix($color1, $color2, $weight)
  • rgba($color, $alpha)
  • color.scale($color, $lightness: 20%)

使用 @function 自定义函数

定义可复用且返回值（而不是 CSS 规则）的函数：

<h2 class="heading">Heading (2rem)</h2>
  <p class="body">Body text (1.125rem)</p>

@if @else 控制流

根据变量值有条件地输出 CSS：

<p class="text-large">Large text variant</p>
  <p class="text-small">Small text variant</p>
  <p class="text-default">Default text variant</p>

@each 循环

遍历列表或映射，以生成多个规则：

<button class="btn-primary">Primary</button>
  <button class="btn-danger">Danger</button>
  <button class="btn-success">Success</button>

@for 循环

为一系列值生成 CSS：

<div class="col-1">col-1 (20%)</div>
  <div class="col-2">col-2 (40%)</div>
  <div class="col-3">col-3 (60%)</div>
  <div class="col-4">col-4 (80%)</div>
  <div class="col-5">col-5 (100%)</div>

@while 循环

当条件为真时循环。请谨慎使用——@each 和 @for 已经可以覆盖大多数情况：

<div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>

Sass 映射

映射是 Sass 中的键值对数据结构：

<div class="box">Responsive box (resize wider than 768px to see color change)</div>

@error @warn @debug

Sass 提供三种诊断功能：

  • @error：显示消息并停止编译
  • @warn：记录警告但不会停止编译
  • @debug：在开发过程中记录一个值

插值 #{...}

使用 #{$variable} 将变量值插入选择器、属性名称或媒体查询中：

<p class="element">Interpolated property (#{$property})</p>

快速检查

Sass @mixin 与 Sass @function 有什么区别？

回顾

Sass 内置的颜色函数（变暗、变亮、混合）支持在编译时处理颜色。自定义 @function 会返回计算结果。@if/@else 可添加条件输出。@each 可遍历列表和映射。@for 可遍历数字范围。这些特性能够以极少的重复代码编写功能强大且符合 DRY 原则的样式表。

常见问题解答

「Sass 函数与控制流」课时是免费的吗？

是的 — 「Sass 函数与控制流」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Sass 函数与控制流」这节课中我会学到什么？

使用 Sass 内置函数、@if、@each 和 @for 指令编写动态 CSS 逻辑。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「Sass 函数与控制流」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 变量、嵌套与局部文件
  2. 混入与包含
  3. 扩展与占位选择器
  4. Sass 函数与控制流
← 返回 CSS Academy