Sass 进阶：从“骚”到“骚断腿”的深潜之旅

警告：本章内容极度高能，阅读时请系好安全带，防止因“居然还能这样写”而原地起飞。
前置技能：已掌握变量、嵌套、Mixin、Import，且心脏足够强大。

第一回：函数——把颜色玩成变色龙

CSS 里调个颜色亮度只能靠眼？Sass 内置函数让你像调电视音量一样简单：

$主色: #ff6b6b;

// 让颜色变亮 20%
.lighten { color: lighten($主色, 20%); }

// 让颜色变暗 15%
.darken  { color: darken($主色, 15%); }

// 反转颜色，深夜模式秒切
.invert  { color: invert($主色); }

// 透明度套餐
.rgba    { background: rgba($主色, .5); }

常见函数速查表（背不下来就收藏）：

一句话：颜色不用靠 PS，Sass 就是调色盘。

第二回：自定义函数——当 Sass 学会“算卦”

内置函数不够骚？自己写！场景：px 转 rem，一键全局适配：

@function rem($px, $base: 16) {
  @return $px / $base * 1rem;
}

.button {
  font-size: rem(18);   // 1.125rem
  padding: rem(8) rem(16);
}

再整一个“根据亮度自动选黑/白字”：

@function 智能字色($bg) {
  @if lightness($bg) > 50% {
    @return #000;   // 背景亮→黑字
  } @else {
    @return #fff;   // 背景暗→白字
  }
}

.tag {
  background: $主色;
  color: 智能字色($主色);  // 自动反白
}

总结：函数 = 样式界的计算器，写完一次，团队把你当活神仙。

第三回：Map & Each——“对象数组”一把梭

Map 就是 Sass 版的 JSON，搭配 each，批量生成主题色板：

$themes: (
  primary: #ff6b6b,
  success: #51cf66,
  warning: #f7b731,
  danger:  #ff4757
);

@each $name, $color in $themes {
  .btn-#{$name} {
    background: $color;
    border-color: darken($color, 10%);
    color: 智能字色($color);
  }
}

编译后瞬间四款按钮，UI 小姐姐直接给你比心。
再玩深一点：生成 10 级灰阶工具类：

$grays: (
  1: #f1f3f5, 2: #e9ecef, 3: #dee2e6,
  ..., 10: #212529
);

@each $level, $gray in $grays {
  .text-gray-#{$level} { color: $gray; }
  .bg-gray-#{$level}  { background: $gray; }
}

一句话：Map + Each = 批量制造机，写完去喝奶茶，样式自己生自己。

第四回：Content Blocks——Mixin 的“外挂插槽”

普通 Mixin 只能传变量？加上 @content，让调用者往里塞任意代码：

@mixin 响应式($min) {
  @media (min-width: $min) {
    @content;  // 调用时塞进来
  }
}

@include 响应式(768px) {
  .sidebar { width: 200px; }
  .main    { margin-left: 220px; }
}

再整一个“暗黑模式”开关：

@mixin 暗黑模式 {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

body {
  background: #fff;
  color: #000;

  @include 暗黑模式 {
    background: #121212;
    color: #eee;
  }
}

总结：@content = 给 Mixin 开“后门”，调用方想写啥就写啥，灵活性瞬间 MAX。

第五回：数学运算——样式里的“奥数班”

Sass 支持 + - * / %，做网格再也不用计算机：

$cols: 12;
$gap:  20px;

@function col-width($n) {
  @return percentage($n / $cols);
}

.grid {
  display: flex;
  gap: $gap;
  
  @for $i from 1 through $cols {
    .col-#{$i} {
      width: col-width($i);
    }
  }
}

再秀一把“黄金比例”边距：

$base: 1rem;
$r: 1.618;  // 黄金比例

@function golden($n) {
  @return $base * pow($r, $n);
}

.title   { margin-bottom: golden(0); }  // 1rem
.subtitle{ margin-bottom: golden(-1);}  // 1/1.618rem

一句话：把数学交给 Sass，你只负责优雅。

第六回：调试黑科技——@debug & @warn

代码写崩了？让 Sass 开口说话：

$可疑值: 1rem + 2px;

@debug "当前值是：#{$可疑值}";
// 终端输出: 当前值是：1rem + 2px

@warn "单位不一致，你可能在作死！";

编译时就会在终端看到高亮提示，调试效率 +10086。
（PS：生产环境记得删掉，否则隔壁后端以为你在写日志。）

第七回：性能锦囊——别让“骚”变成“卡”

1. 嵌套别超过 4 层，编译后选择器过长会被浏览器拉黑名单。
2. 循环里慎用复杂函数，10×10 的网格生成 100 个类，体积爆炸。
3. 多用 %placeholder 继承，少用无参数 Mixin，减少重复代码。
4. 上线前 --style compressed，一秒瘦身 70%，网速差也飞起。

终极彩蛋：一键“骚断腿”命令合集

结业小测（满分 120，低于 100 请重读）

1. 写一个 @function 互补色($c)，返回传入颜色的 180° 互补色。
2. 用 Map + Each 生成 .m-0 到 .m-5 的 margin 工具类，间距按 4px 递增。
3. 把“暗黑模式”封装成带 @content 的 Mixin，并给 body 调用一次。

提交方式：把代码贴到群里，配文字“Sass 骚断腿，谁与争锋”，收获 30+ 大拇指即算通过。

下下回预告（真的最后一章）

《Sass 与工程化：Webpack、Vite、GitHub Actions 三连击》
——教你把 Sass 塞进现代化流水线，提交代码→自动编译→压缩→部署，一杯咖啡的功夫，全球用户都能看到你的“骚”样式。

最后的最后：
CSS 是柴米油盐，Sass 是火锅底料；
会写 Sass 不稀奇，能把团队带飞才是真的“骚断腿”。
兄弟们，进阶路上不见不散！