sass中@mixin可定义带默认值的可复用样式块，如@mixin pad($size: 16px) { padding: $size; }，调用@include pad()使用默认值，@include pad(24px)覆盖默认值。

直接用 @mixin 定义可复用样式块，再用 @include 在需要的地方插入——这是 Sass 最轻量、最可控的复用方式，比 @extend 更灵活，比复制粘贴更安全。

怎么写一个带默认值的 @mixin

参数必须以 $ 开头，否则编译后会变成字面量字符串，比如 padding: size；默认值写在参数名后用冒号分隔，调用时可省略。

• @mixin pad($size: 16px) { padding: $size; } —— 调用 @include pad() 就用默认值，@include pad(24px) 就覆盖它
• @mixin border($width: 1px, $style: solid, $color: #ccc) { border: $width $style $color; } —— 支持按位置传参（@include border(2px, dashed)）或关键词传参（@include border($color: red)）
• 单位要统一：如果参数是 $size，就别在 mixin 体内硬写 px，否则传 rem 会出错

@include 嵌套在选择器里会怎样

它只是把 mixin 内部的声明原样展开到当前选择器作用域，不新增层级，也不改变 CSS 优先级。

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

• 在 .card { @include flex-center; } 中，flex-center 里写 display: flex，最终就是 .card { display: flex; ... }
• 如果 mixin 里用了 &__title 这种嵌套语法，& 会被自动替换成外层选择器，适合 BEM 场景
• 多个 @include 并列时，后写的同名属性会覆盖前面的，和手写 CSS 层叠规则一致

哪些情况不该塞进 @mixin

不是所有重复样式都值得封装。过度抽象反而让调试变慢、编译体积变大。

• 单条属性且极少变动，比如 cursor: pointer，直接写比 @mixin clickable { cursor: pointer; } 更干脆
• 强业务语义的组合，如 @mixin user-card-header，名字绑死了用途，换个页面就难复用
• 涉及主题切换或运行时逻辑判断（比如根据 dark mode 改颜色），Sass 的 @if 能做但维护成本高，更适合交给 CSS 自定义属性或 JS 控制

真正关键的是：@mixin 不生成实际 CSS，只等你调用；而 @include 是一次“展开”，每次调用都会复制一份样式代码——所以别在循环里无节制地 @include，尤其当 mixin 内容很大时，容易让输出 CSS 膨胀。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！