混入与包含
使用 @mixin 创建可复用的样式代码块，并通过 @include 在任意位置引入它们。
混入与包含 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
什么是混入
Sass 中的混入是一组可复用的 CSS 声明。与普通类不同，它可以接受参数，因此比复制粘贴更加灵活。使用 @mixin 定义，使用 @include 调用。
基本混入
不带参数的混入就是一组可复用的声明：
<div class="hero">Centered hero content</div>
带参数的混入
向混入传递值，以自定义其输出：
<button class="btn-primary">Primary</button>
<button class="btn-danger">Danger</button>
默认参数
为混入参数设置默认值，使其成为可选参数：
<div class="card">Card with default shadow</div>
<div class="modal">Modal with custom shadow</div>
关键字参数
按名称传递混入参数，以提高可读性：
<div class="tooltip">Tooltip</div>
@content — 带代码块的混入
混入可以使用 @content 接受代码块。传入的代码块会插入到 @content 所在的位置：
<a href="#" class="link">Hover or focus this link</a>
<a href="#" class="link-demo">Same link, hover state shown statically</a>
响应式混入
用于媒体查询的常见混入：
<div class="sidebar">Sidebar (280px wide on desktop ≥ 1024px)</div>
排版混入
用于保持字号比例一致的文本样式混入：
<h2 class="heading">Heading text style</h2>
<p class="body">Body text style</p>
混入与函数
混入输出 CSS 声明；函数返回一个值。如果要输出多个 CSS 规则，请使用混入；如果需要计算出一个值，请使用函数。
避免过度使用混入
过多的混入会创建难以调试的抽象间接层。只有在某种模式会重复使用 3 次或更多次时，才应创建混入。对于一次性样式，直接编写 CSS 即可。
快速检查
Sass 混入定义中的 @content 有什么作用？
回顾
使用 @mixin 定义混入，使用 @include 调用混入。混入可以接受带有可选默认值的参数。@content 允许调用方将 CSS 代码块注入混入，从而实现媒体查询辅助工具等包装模式。请只为会重复使用多次的模式创建混入，以避免抽象带来的额外开销。
常见问题解答
「混入与包含」课时是免费的吗？
是的 — 「混入与包含」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「混入与包含」这节课中我会学到什么？
使用 @mixin 创建可复用的样式代码块，并通过 @include 在任意位置引入它们。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「混入与包含」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。