Mixin 与函数详解
🎯 引言
学会这篇文章后，你将能够用 Scss 的 Mixin 和函数来提升你的 CSS 代码复用率和可配置性。无论是按钮颜色、大小，还是主题色调调整，都可以轻松搞定。这样不仅能让代码更简洁，还能让样式统一管理成为可能，节省大量开发和维护时间。
✨ @mixin / @include 基本用法
先聊聊 Mixin 究竟是什么。简单来说，Mixin 就像是 CSS 里的“代码模版”，你把常用的样式写成一个块，然后需要用的时候直接“include”进来。这样避免了重复代码，让样式更干净。
来看个简单例子：
@mixin center-flex {
display: flex;
justify-content: center;
align-items: center;
}
.box {
@include center-flex;
width: 100px;
height: 100px;
background-color: skyblue;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: skyblue;
}
这里 @mixin center-flex 定义了一个居中弹性盒子布局的样式块，.box 通过 @include center-flex 就能直接用。是不是很方便？
🎨 参数化 Mixin（如按钮大小、颜色等）
光会写固定样式还不够酷，我们还想让样式“会变”，比如按钮大小、颜色都能灵活调整。这个时候，Mixin 支持传入参数！
看下面的按钮例子：
@mixin button-style($bg-color, $font-size: 16px) {
background-color: $bg-color;
color: white;
padding: 10px 20px;
font-size: $font-size;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-primary {
@include button-style(#3498db);
}
.btn-large {
@include button-style(#e74c3c, 20px);
}
.btn-primary {
background-color: #3498db;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-large {
background-color: #e74c3c;
color: white;
padding: 10px 20px;
font-size: 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
这个 button-style Mixin 接收一个背景色和一个字体大小参数。用的时候指定不同颜色和尺寸，就能生成各种风格按钮。
🛠️ @function 自定义函数
除了 Mixin，SASS 还有 @function，专门用来写“值”的计算。比如你想根据某个数字动态计算大小，或者颜色的透明度，都可以用函数。
举个简单例子，实现一个根据输入尺寸计算边距的函数：
@function spacing($size) {
@return $size * 8px;
}
.container {
margin: spacing(2);
padding: spacing(1);
}
.container {
margin: 16px;
padding: 8px;
}
这里 spacing 函数接收一个数字，返回对应的像素值乘以 8。这样你就用数字来控制间距，代码更可读。
🌈 内置函数：map.get()
map.get($map, $key)：从映射表里取值，方便管理复杂的主题色或变量。
举个结合使用的例子：
@use 'sass:map';
$themes: (
primary: #3498db,
secondary: #2ecc71,
danger: #e74c3c,
);
@mixin themed-button($type) {
$color: map.get($themes, $type);
background-color: $color;
color: white;
padding: 10px 16px;
border-radius: 3px;
border: none;
cursor: pointer;
}
.btn-primary {
@include themed-button(primary);
}
.btn-danger {
@include themed-button(danger);
}
.btn-primary {
background-color: #3498db;
color: white;
padding: 10px 16px;
border-radius: 3px;
border: none;
cursor: pointer;
}
.btn-danger {
background-color: #e74c3c;
color: white;
padding: 10px 16px;
border-radius: 3px;
border: none;
cursor: pointer;
}
这里用 map.get 取得颜色值，代码简单又灵活。
💡 复用与可配置理念总结
通过 Mixin 和函数，我们实现了样式的“复用”——避免重复代码，让代码更干净；同时实现了“可配置”——通过参数化让样式灵活多变，不用写一堆类似但又不一样的样式。
这在大型项目特别重要，可以节省大量时间，也方便后来维护和修改。
🧾 小节总结
- Mixin 是写样式时做复用的利器，避免重复代码。
- 参数化 Mixin 让样式可以根据需求灵活调整，实现“可配置”。
- @function 用来计算值，内置函数比如 map.get() 让颜色和变量管理更简单。
❓ 知识问答（Q&A）
Q： Mixin 和函数有什么区别？
A： Mixin 复用的是整段样式代码，函数则负责返回计算后的值。
Q： 参数化 Mixin 传参时，可以传默认参数吗？
A： 可以，定义参数时可以给参数赋默认值，不传时就使用默认。
Q： map.get() 主要用来做什么？
A： 它用来从 map（映射表）里取值，方便管理复杂的变量集合。
🧪 小练习
练习 1：写一个 Mixin，实现一个带阴影和圆角的卡片组件，支持传入阴影颜色和圆角大小参数。
@mixin card($shadow-color, $border-radius) {
// 在这里补充代码
}
.card {
@include card(rgba(0, 0, 0, 0.15), 8px);
}
练习 2：写一个函数，根据输入数字计算字体大小，比如 font-size = base-size + n * step，其中 base-size 是 14px，step 是 2px。
@function dynamic-font-size($n) {
// 在这里补充代码
}
.text {
font-size: dynamic-font-size(3);
}
🎉 恭喜你已经掌握 Mixin、参数化 Mixin 以及 Scss 函数和内置函数的使用技能啦！用这些技巧，你的样式代码将更高效、灵活且易维护。试试看，把它们用到你自己的项目中吧！