# 一、环境搭建
# 1、Scss 和 Sass
Sass 是一种动态样式语言，由Ruby开发者设计和开发，采用缩排语法，相较于 css 多出了许多功能（如：变量、嵌套、运算、混入、继承、指令、颜色处理、函数等）。
由于 Sass 采用的是缩排语法，对于 css 前端的 web 开发者很不友好，所以 sass 从第三代放弃了缩进风格，兼容了 css 代码，使用花括号和分号，即 Sass 3 变成了 Scss（sassy css）
# 2、输出风格
Sass 输出样式的风格有四种风格，默认为 nested 风格。
| nested | （嵌套） | 默认 |
| compact | （紧凑） | |
| expanded | （扩展） | |
| compressed | （压缩） | |
常规的 web 前端 css 风格为
expanded（扩展）风格。但使用 sass 时，为了减少文件体积，建议使用compressed（压缩）风格
# 3、Scss 注释
// 单行注释
/* 多行注释 */
scss 编译成 css 文件时，单行注释不会保留，但多行注释会保留
# 二、环境搭建
# 3、本地环境
要将 sass 文件转为 css 文件，可以在 vscode 中安装Live Sass Compiler
注意：以前的该插件已经弃用，但原作者标明了新插件地址（貌似作者换了 🤔）
- 配置
// setting.json
{
/* 压缩设置 */
"liveSassCompile.settings.formats": [
// This is Default.
{
"format": "compressed", // nested, expanded, compact, compressed
"extensionName": ".min.css",
"savePath": "~/../css" // 为 null 表示当前目录
}
],
/* 排除目录 */
"liveSassCompile.settings.excludeList": ["/**/node_modules/**", "/.vscode/**"],
/* 是否生成对应的map */
"liveSassCompile.settings.generateMap": false,
/* 是否添加兼容前缀 如： -webkit- , -moz- ... */
"liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"]
}
# 3、项目 sass 包 ✨
以前主流的是 node-sass，但现在存在包安装与 node 环境的问题；sass 官方推荐使用 dart-sass，最新的特性都会在这个上面先实现。
重点：查看 npm 平台发现，dart-sass 包已经更换名字为 sass 包
- 安装
# 环境（原dart-sass包）
npm i sass -D
# sass编译
npm i style-loader css-loader sass-loader -D
- 配置
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader'
]
}
]
}
}
# 三、CSS 预处理器
Sass、Less 和 Stylus 都是 CSS 预处理器，它们在原生 CSS 的基础上提供了一些额外的功能，如变量、嵌套、混入（Mixin）、函数等，以便更方便、灵活地编写和维护样式。
提示
Sass 的原始版本（也称为"Ruby Sass"）是用 Ruby 编写的，因此在使用 Sass 之前需要安装 Ruby 环境。
后来出现了一个基于 JavaScrip 语言的版本，称为"Dart Sass"，是目前推荐的版本。因为它性能更好，也不再需要依赖于 Ruby。
- Sass： 提供两种语法，一种是缩进式的，类似于 Python 的风格，另一种是 SCSS（Sassy CSS），更接近原生 CSS，使用花括号和分号。
- Less： 使用类似原生 CSS 的语法，但添加了一些额外的功能。
- Stylus： 使用非常简洁的语法，省略了大括号和分号，依赖于缩进。
/* Css */
:root {
--color: #f00;
}
/* Sass */
$color: #00c;
/* Less */
@color: #00c;
/* Stylus */
mainColor = #00c;
← 【Bootstrap4】 基础语法 →