一、简介
前言
因为 CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。
所以 Sass 引入可以合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的 层叠样式表语言。
- Sass 是一个 CSS 预处理器。
- Sass 是 CSS 扩展语言，是CSS的超集，可以帮助我们减少 CSS 重复的代码，节省开发时间。
- Sass 完全兼容所有版本的 CSS。
- Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
- Sass 生成良好格式化的 CSS 代码，易于组织和维护。
- Sass 文件后缀为
.scss。
官网：https://sass-lang.com
中文网：https://www.sass.hk
Sass预处理器
浏览器并不支持 Sass 代码。因此，需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。可以去官网查看安装教程。
命令
sass xxx.scss xxx.css
从终端运行thesass命令，可以将Sass编译为CSS。sass --watch input.scss output.css
使用--watch标志观看单个文件或目录的，可以在每次保存Sass时重新编译CSS。sass --watch app/sass:public/stylesheets
可以使用文件夹路径作为输入和输出，并用冒号将它们分开，来观察和输出到目录。
可以使用
二、应用
.html文件当中是不能直接使用Sass, 需要.scss转译成.css，并引入生成的.css文件进行使用，项目结束后根据需要是否删除 .scss 文件和 .map文件。
变量
可以用来存储需要重复使用的CSS值等内容，例如：颜色、字体堆栈等等。
使用 $符号进行声明。
示例：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
嵌套
Sass将允许您以遵循HTML相同视觉层次结构的方式嵌套CSS选择器。使CSS具有更佳的可读性。
示例：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
部分
部分是带有前导下划线的Sass文件。你可以把它命名为_partial.scss。
让Sass预处理器知道该文件只是一个部分文件，它不应该生成成CSS文件。Sass部分与@use规则一起使用。
模块
可以使用@use规则 拆分 .scss，此规则将另一个Sass文件加载为模块。
####### 示例：
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
// styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
混合
Sacc允许制作一组CSS声明，并在整个站点中重复使用。需要使用@mixin、@include规则。
示例：
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}
示例解析：
要创建混和，先使用@mixin指令进行命名，示例命名了混合theme，且在括号内使用变量$theme，这样可以传递任何的主题。创建@mixin后，可以将其用作以@include开头的CSS声明，后跟@mixin的名称。
继承/扩展
使用@extend，可以将一组CSS属性从一个选择器共享到另一个选择器。
作用：
- 只有在扩展时才会打印，并且可以帮助保持编译的CSS整洁。
- 有助于避免在HTML元素上写入多个类名。
示例：
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
.css
/* This CSS will print because %message-shared is extended. */
.warning, .error, .success, .message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
引申：
这个示例也可以通过混合的规则实现，不过在生成.css的文件里面，代码的简洁性上不如扩展。
运算符
Sass有少数标准数学运算符，如+、-、*、math.div()、%。
@use "sass:math";
.container {
display: flex;
}
article[role="main"] {
width: math.div(600px, 960px) * 100%;
}
aside[role="complementary"] {
width: math.div(300px, 960px) * 100%;
margin-left: auto;
}
