Sass 教程：从“土”到“骚”的进化之路

警告：阅读本教程前，请确保手边有降压药，因为你会频繁遭遇“卧槽，原来还能这么写”的惊喜。
适合人群：CSS 写到手抽筋、被嵌套逼疯、被重复颜色值气到原地升天的你。

第零回：Sass 是啥？能吃吗？

• Sass = Syntactically Awesome Stylesheets
  翻译：语法“骚”到不行的样式表。
• 本质：CSS 的“外挂”，写完 Sass 后，一键编译成普通 CSS，浏览器照样认识。
• 口号：写样式像写段子，怎么爽怎么来。

第一回：安装 Sass——三步走，比泡方便面还快

1. 装 Node（已装请跳过，没装去 nodejs.org 当下载侠）。

2. 打开终端，输入：

   npm install -g sass

3. 验证：

   sass --version

   如果返回版本号，恭喜，你已经拥有“骚”力；如果返回“command not found”，请把电脑重启三遍并大喊“我信了你个邪”。

第二回：变量——给颜色起绰号，告别“#114514”

写 CSS 时，每次复制粘贴颜色值像转发锦鲤？Sass 变量救你狗命：

$主色: #ff6b6b;
$辅色: #4ecdc4;
$备胎色: #f7b731;

.button {
  background: $主色;
  border: 1px solid $备胎色;
}

编译后：

.button {
  background: #ff6b6b;
  border: 1px solid #f7b731;
}

总结：变量就是给色值起小名，以后想改主题色，改一行全站秒变“新皮肤”，老板看你都像看闪电侠。

第三回：嵌套——告别“俄罗斯套娃”式选择器

原生 CSS 写法：

.nav > ul > li > a:hover { … }

Sass 写法：

.nav {
  ul {
    li {
      a {
        &:hover {
          color: $主色;
        }
      }
    }
  }
}

优点：层级一目了然，缩进就是战斗力；
缺点：别嵌套十层，否则编译完的选择器比你家族谱还长，浏览器会翻白眼。

第四回：Mixin——样式界的“复制忍者”

场景：按钮有圆角、阴影、过渡，三件套写 N 遍？封装成 Mixin，随叫随到：

@mixin 按钮三件套($圆角: 4px, $阴影: 0 2px 4px rgba(0,0,0,.2)) {
  border-radius: $圆角;
  box-shadow: $阴影;
  transition: all .3s ease;
}

.btn-primary {
  @include 按钮三件套;
  background: $主色;
}

.btn-ghost {
  @include 按钮三件套(8px, none);
  background: transparent;
}

一句话：Mixin 就是带参数的“CV 大法”，写完一次，全场横着走。

第五回：Import——模块化，告别“一锅炖”

把变量、Mixin、组件样式拆成文件，再用 @import 拼起来，像拼乐高：

// _variables.scss
$主色: #ff6b6b;

// _mixins.scss
@mixin 按钮三件套 { ... }

// main.scss
@import 'variables';
@import 'mixins';
@import 'button';

编译后只生成一个 CSS，但源码结构清爽，团队协作不再“互相覆盖，当场绝交”。

第六回：继承——“啃老”合法化

%错误提示 {
  color: red;
  border: 1px solid red;
  padding: 8px;
}

.login-error {
  @extend %错误提示;
  background: #ffecec;
}

.pay-error {
  @extend %错误提示;
  background: #fff0f0;
}

解释：

• %错误提示 是“幽灵类”，不会出现在编译结果，仅供继承。
• 编译后，.login-error, .pay-error 会合并共享样式，CSS 体积瘦身，绿色节能，人人有责。

第七回：循环&条件——让样式学会“自己动”

批量生成 12 列网格：

@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage($i / 12);
  }
}

编译后：

.col-1 { width: 8.33333%; }
...
.col-12 { width: 100%; }

再举个条件判断：

@mixin triangle($方向) {
  @if $方向 == up {
    border-bottom-color: $主色;
  } @else if $方向 == down {
    border-top-color: $主色;
  }
}

一句话：Sass 把样式写成了“代码”，你会 if/else、会循环，就能让 CSS 自己生自己，懒人狂喜。

彩蛋：编译命令一条龙

开发时：

sass --watch scss:css --style expanded

监听 scss 目录，一改就编译，生成的 CSS 带注释，方便调试。

上线前：

sass scss:css --style compressed

压缩成一行，体积最小，网速再慢也能“丝滑”。

大结局：今日份“骚”操作回顾

课后作业（不交不打铃）

1. 把你最恨的 CSS 文件重命名为 .scss，改两行变量，体验“换色如换衣”。
2. 把重复按钮样式抽成 Mixin，参数支持“大小、颜色、圆角”，下次需求变更，只改一行。
3. 用 @import 把项目样式拆成 5 个文件以内，发群里炫耀，收获前端小姐姐的“大佬牛 x”。

最后毒鸡汤：CSS 是海洋，Sass 是冲浪板；不会冲浪，你只能在水里狗刨。
下期预告：《Sass 进阶：函数、颜色运算、自定义指令》，带你从“骚”到“骚断腿”。