此篇作为 Bootstrap 5 客制化 sass 的序章，会大致讲解什麽是 Sass 以及优势。

Sass

Sass（英文全称：Syntactically Awesome Stylesheets） 有 2 种语法格式：sass、scss，统称念为 sass（罗马拼音：萨斯）。

属於 CSS 预处理器(css preprocessor)，Sass 是 CSS 扩展语言，有助於减少 CSS 重复的程序码，节省开发时间。

解决了以往会将全部样式写在一只 css 档案中，造成不易阅读以及维护的问题。

编译

透过编译 Sass 档案，将其编译成 css 档案，html 还是只看得懂 css（所以不是读取 scss 档案）。

文件架构

简单分为两类方向来介绍。

初学：统一写在 all.scss。

• 刚学习写 sccs 直接全部在 all.scss 练习 scss 即可。

熟练：all.scss 汇总路径。

• 当写个样式开始变多，可以考虑将 scss 拆分，将其样式分别写在其它只 scss 档案。统一由 all.scss 档案去汇入其它 scss 档案路径，最後编译 all.scss 即可得到全部样式的 css 档案。

如何选择

比较图：

SCSS

新手建议先学 scss。

优势：

• 市占率超过 9 成 的开发者都在用。
• 网路上资源大多是 scss 格式。
• 支援 css（大括号 {}、分号 ;）。

SASS

学习曲线偏高，若本身是後端工程师（有 css 基础）、Ruby 工程师，建议可以学习 sass。

优势：

• 写法比较亲切。
• 程序码较乾净，也相对比较严谨。

⚠️ 如果是多人共同撰写也要考虑 CSS 支援度，网路资源大多也是 scss 格式（因此在 sass 中执行 scss 样式，还要删除括弧及分号才能执行。）

Sass 真的比较香？

常见疑问

Q：可能很多人会说：「啊最後都要编译成 css 为什麽不直接写 css 就好？」

A：那写程序为什麽不要用组合语言写就好？

好来开玩笑的太凶了，其实就差一点点啦。

以下用情境式来介绍几个 sass 的优点。

人物介绍：
老屁股：代表资深老古板工程师。
小萌新：代表热爱学习的小菜鸟。

剧情开始：

老屁股：css 用好好的为什麽要学 sass？
小萌新：前辈你看

老屁股：看不出差别啊这有什麽差！？
小萌新：别急好戏在後头，这边只是够告诉你 scss 写法和 css 差不多，转换也不用担心。

Nesting 巢状结构：降低父元素重复性。

老屁股：什麽不就是少写一个 .p 而已吗？有什麽厉害的？
小萌新：不对喔不对喔，让我换个例子娓娓道来巢状结构带来的优势。

小萌新：上述一般写法会引发出以下几个问题

• 相依性过高：
  • 只要有其中一层改变了就没办法使用了。（ex：li 变为 div）
• DRY (Don’t Repeat Your CSS)
  • 重复撰写相同的样式名称。
• KISS (Keep It Simple Stupid)
  • 通常样式变多时，程序码会变得很冗长，不易阅读以及维护。

老屁股：DRY、KISS，四勒供三小朋友？但常常因为依赖关系造成问题是没错....

Sass 强大语法和 css 写法差异。

小萌新：好啦前辈，我要开始放招罗，让你看看 sass 的厉害。
老屁股：拢来咩！

第一招：变数

解决：一键快速修改不用在担心修改错误或漏修改。

第二招：@mixin

解决：重复程序码的撰写，常常样式相同只有参数不同，用 @mixin 就对了。

小萌新：前辈这边除了将重复程序进行模组化，但更厉害的是，使用模组化来组合更大更复杂的样式语法。

• 第三招：@each

解决：自动产生 css class（通用类别），不只解决了重复程序码的问题，还可以让 css class 的程序码自动产生。

小萌新：前辈这麽猛的东西还不用吗？
老屁股：甘太香了吧，还不快教我用！！

总结

Sass 提供巢状结构和变数管理及运算功能，并带来以下优势：

• 抽象化（模组化）
• 减少重复的程序码
• 提升可读性
• 维护性