Scss 是对 CSS 的扩展，提供了比 CSS 更简洁的语法和更强大的功能。不过，在部署时，我们要先把 Scss 编译成 CSS，才能让浏览器识别。编译 Scss 的方法有很多，这里我们使用 VS Code 的插件 Live Sass Compiler 进行自动编译。
基本准备
-
配置保存目录。在 VS Code 配置文件中添加如下配置：
"liveSassCompile.settings.formats": [{"format": "expanded","extensionName": ".css","savePath": "/dist/css","savePathReplacementPairs": null} ]这将使 Scss 编译产物被放置在
/dist/css目录下。 -
认识项目结构：
# 创建产物目录 mkdir -p dist/css touch dist/index.html # 创建 Scss 代码目录 mkdir scss touch scss/main.scss. ├── dist │ ├── css │ └── index.html └── scss└── main.scss这里
dist目录用来存储我们的编译产物，scss目录用来存储我们的 Scss 源代码。 -
基本配置：
我们来编写一些基础代码。首先在
dist/index.html中引入 CSS 文件：dist/index.html:<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 在这里引入 CSS 文件 --><link rel="stylesheet" href="./css/main.css"><title>Scss Tutorial</title> </head> <body></body> </html>接下来编辑
scss/main.scss，添加一个 CSS 规则：body {background: blue; } -
使用自动编译：
使用 VS Code 打开
scss/main.scss文件，窗口右下角可以看到Watch Sass的按钮。点击它，就会监视 Scss 文件的改动并自动编译到dist/css目录。打开 Live Server，访问 http://localhost:5500/dist，就会看到我们的 Scss 规则生效了：
Scss 变量
在 Scss 中，我们可以像这样使用变量：
scss/main.scss：
$primary-color: #272727;
$accent-color: #ff652f;
$text-color: #fff;body {background: $primary-color;
}
参考：Learn Sass in 30 Minutes | YouTube
