day26CSS-Sass、Stylus、Less
1. Sass(网页中一般使用Sass)
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
安装扩展：
文件扩展名为.scss。
1.1 简单使用
1. 新建一个sacss文件，在该文件下在建一个css文件夹，在css文件夹下新建a.scss。编写a.scss文件。
2. 编写index.html。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>在这里自动生成的css文件<link rel="stylesheet" href="./css/a.css">
</head>
<body><div class="div1"></div>
</body>
</html> 
1.2 变量的写法
1.2.1 变量 $ (Variables: $)
SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：
$width: 5em;
直接使用即调用变量：
#main {width: $width;
}
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：
#main {$width: 5em !global;width: $width;
}#sidebar {width: $width;
}
编译为
#main {width: 5em;
}#sidebar {width: 5em;
}
1.2.2 使用案例
1.3 详细使用方法查看文档
Sass教程 Sass中文文档 | Sass中文网
2. Less
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。
因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。
文件扩展名为.less。
2.1 Less的引入
2.1.1 浏览器环境使用方法
2.1.2 node环境使用方法
下载Less：
npm i less -g
查看Less所有的插件命令：
lessc将.less文件转换为.css文件命令：
npx lessc 路劲/自己写的文件名.less 路劲/自己写的文件名.css案例：
2.2 Less的使用文档
Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com)
3. stylus
Stylus 是一个动态样式语言，可以编译成 CSS。它提供了更简洁、灵活的语法，支持变量、嵌套、混合（Mixins）、函数等高级功能。
3.1 stylus下载
npm i stylus -g
文件扩展名为.styl。
3.2 编译 .styl 文件监听文件变化（自动编译）
stylus -m -w 文件路劲
a.styl：
编写成a.css:
3.3 使用stylus查看文档
Stylus - 富于表现力、健壮、功能丰富的 CSS 预处理器 | Stylus 中文网 (stylus-lang.cn)