feat: add sass usage

_posts/2024-11-12-sass-lang.md

@@ -0,0 +1,70 @@
+---
+layout: post
+title: Sass 语言使用说明
+date: 2024-11-12
+permalink: /sass/
+---
+
+* TOC
+{:toc}
+
+[Sass](https://sass-lang.com/) 是一种 CSS 预处理器语言，它的作者是 [*Hampton Catlin*](https://github.com/hamptonmakes) 和 [*Natalie Weizenbaum*](https://github.com/nex3) (nex3)。
+
+2006 年，Ruby 正当红，*Natalie* 和 *Hampton* 基于 Ruby 实现了最初的 Sass 版本：[Ruby Sass](https://sass-lang.com/ruby-sass/)。该版本于 2019 年 3 月 26 日停止维护。
+
+[LibSass](https://sass-lang.com/libsass/) 是基于 C/C++ 实现的 Sass 库，目的是便于和其它编程语言整合。这个库也不再维护。
+
+目前推荐使用的 Sass 基于 Dart 编程语言实现，即 [Dart Sass](https://sass-lang.com/dart-sass)，npm 上的 [`sass`](https://www.npmjs.com/package/sass) 包就是源自 `Dart Sass`，只不过编译成了纯 JavaScript 代码。
+
+目前最新的 `Dart Sass` 版本号是 1.80.6。
+
+## 安装 {#install}
+
+把 Sass 安装为项目的开发依赖：
+
+```sh
+pnpm add --save-dev sass
+```
+
+Sass 支持两种语法风格，一种是 `.sass`，使用缩进代表嵌套层级，一种是 `.scss`，更靠近原生的 CSS 语法，这种语法更常用。
+
+如果希望把 `.scss` 文件编译为 `.css` 文件，执行如下命令：
+
+```sh
+pnpm sass input.scss output.css
+```
+
+如果希望实时监听文件或目录，使用 `--watch` 标识符：
+
+```sh
+pnpm sass --watch input.scss output.css
+```
+
+如果监听的目标是文件夹，使用冒号 `:` 分隔源目录和目标目录：
+
+```sh
+pnpm sass --watch src/scss:dist/styles
+```
+
+## 变量 {#variables}
+
+Sass 变量使用 `$` 前缀标识。
+
+```scss
+$font-stack: Helvetica, sans-serif;
+$primary-color: #333;
+
+body {
+    font: 100% $font-stack;
+    color: $primary-color;
+}
+```
+
+会被编译为：
+
+```css
+body {
+    font: 100% Helvetica, sans-serif;
+    color: #333;
+}
+```