***个人Sass笔记系列，参考官方文档翻译，作加深理解和日后查阅使用，若有不当之处欢迎指正~***
Sass支持两种语法，可以相互引入使用，所以要用哪种比较随意，取决于你和你的team喜欢怎么来。
1）SCSS
SCSS语法使用.scss作为文件扩展名。除去少数例外，它是css的超集，也就是说所有有效的css都是有效的scss，意如其名。与css的相似性使得它成为最流行最好上手的语法。
scss文件大概长这样：
@mixin button-base() { @include typography(button); @include ripple-surface; @include ripple-radius-bounded; display: inline-flex; position: relative; height: $button-height; border: none; vertical-align: middle; &:hover { cursor: pointer; } &:disabled { color: $mdc-button-disabled-ink-color; cursor: default; pointer-events: none; } }
2）缩进语法（The Indented Syntax）
缩进语法是sass最初使用的语法，所以使用.sass作为文件扩展名，因此这种语法有时也就称为SASS。缩进语法支持SCSS的所有特性，不同的只是把格式化文档的方式从花括号和分号换成了缩进而已，同样地意如其名。不过相比于SCSS还有一些不同的地方，在教程接下来的部分会逐一说明。
缩进语法大概长这样：
@mixin button-base()
@include typography(button)
@include ripple-surface
@include ripple-radius-bounded
display: inline-flex
position: relative
height: $button-height
border: none
vertical-align: middle
&:hover
cursor: pointer
&:disabled
color: $mdc-button-disabled-ink-color
cursor: default
pointer-events: none
Sass样式表是直接从Unicode码位（Unicode code points）解析过来的，跳过了转换为记号流（token stream）的过程。
1）输入编码
通常，一个文档还是最初的那个字节流的时候是ok的，但是，它必须是要解码成Unicode滴。Sass的解码原则如下（原则目前只翻译部分，日后再补）:
@charset, Sass determines the encoding using step 2 of the CSSalgorithm for determining the fallback encoding.2）解析错误
Sass在解析样式表的时候如果遇到了语法错误，解析就会失败，并且会抛出带有无效语法位置和原因信息的错误给用户。这和css是不同的，css专注于经历大多数错误后继续执行，这是Sass并非css严格意义上的超集的一个例子。这让Sass使用者可以立刻看到错误，而不是让Sass带着错误输出为css。
The location of parse errors can be accessed through implementation-specific APIs. For example, in Dart Sass you can access SassException.span, and in Node Sass’s and Dart Sass’s JS API you can access the file, line, and column properties.（日后再补...）
大多数Sass样式表和css差不多，都主要由包含属性声明的样式规则组成，但除此之外Sass有很多其他特性。
1）语句（Statements）
样式表由一系列的语句组成，最终生成的css都由这些语句决定。有些语句会包含含有其他语句的块（由 { 和 } 定义）。具体来说，样式规则是带有块的语句，这些块含有其他语句，比如属性声明。
Sass里语句由分号分隔（如果语句被块包含就可以不用），使用了缩进语法的话则由换行符分隔。
1.全局语句（Universal Statements）
这种语句在Sass任何地方都可以使用：
2.css语句
这些语句会生成css，在任何地方都可以使用除了 @function 中：
3.头部语句
只能在样式表的头部或者嵌套css语句的头部使用：
4.其他语句
2）表达式（Expressions）
表达式放在属性或者变量声明右边，可以得出一个值。任何有效的css属性值都是一个Sass表达式，但是Sass表达式比普通的css值有用多了。它们可以作为参数传递给混合类型和函数，在控制流语句 @if 中使用，进行四则运算。我们称Sass的表达式语法为SassScript。
1.字面量（Literals）
最简单的表达式只代表静态值：
2.运算式（Operations）
Sass定义了许多运算式语法：
3.其他表达式
Sass两种语法之间的注释工作机制存在差异，两种语法都支持两种注释。用 /* */ 定义的注释通常会被编译成css；而用 // 定义的就不会。
1）SCSS语法注释
SCSS语法下的注释和其他语言比如JavaScript的很像，单行注释以 // 开头，到行尾结束。单行注释不会输出任何东西到css，就Sass而言，最好不要书写它们。它们也被称为静默注释（Silent Comments）。多行注释以 /* 开头到下个 */ 结束。书写在语句可以存在的地方的多行注释会被编译为css注释。它们被称为喧嚣注释（Loud Comments）。被编译为css注释的多行注释可以包含插入文字（Interpolation），这些插入文字在注释被编译之前会被过一遍。压缩模式（Compressed Mode）下，多行注释默认也不会输出到css，但以 /*! 开头的注释一定会输出到css中。
// This comment won‘t be included in the CSS. /* But this comment will, except in compressed mode. */ /* It can also contain interpolation: * 1 + 1 = #{1 + 1} */ /*! This comment will be included even in compressed mode. */ p /* Multi-line comments can be written anywhere * whitespace is allowed. */ .sans { font: Helvetica, // So can single-line commments. sans-serif; }
2）SASS语法注释
缩进语法中的注释会有一些不同，它们是基于缩进的。和SCSS语法一样单行注释不会被输出到css，但是接下来每行以缩进开头的注释也不会输出到css（假单行注释?...）。多行注释和SCSS差不多，但是因为SASS是基于缩进的，所以结尾的 */ 是可选的。SASS的多行注释也可以包括插入文字、以 /*! 开头来保证即使在压缩模式下仍能强制输出到css、在表达式中间使用。
// This comment won‘t be included in the CSS. This is also commented out. /* But this comment will, except in compressed mode. /* It can also contain interpolation: 1 + 1 = #{1 + 1} /*! This comment will be included even in compressed mode. p .sans font: Helvetica, /* Inline comments must be closed. */ sans-serif
3）文档注释（Documentation Comments）
在用Sass编写样式库的时候，你可以使用注释来文档化你提供的混合变量、函数、变量和占位选择符和样式库本身。文档注释可以被SassDoc Tool识别以生成非常好看的文档，点这可以实操一下。文档注释属于静默注释，把你要文档化的东西以 /// 开头，SassDoc会把注释文字编译为MarkDown，并且支持多种非常有用的注解来更详细地描述文档。
/// Computes an exponent. /// /// @param {number} $base /// The number to multiply by itself. /// @param {integer (unitless)} $exponent /// The number of `$base`s to multiply together. /// @return {number} `$base` to the power of `$exponent`. @function pow($base, $exponent) { $result: 1; @for $_ from 1 through $exponent { $result: $result * $base; } @return $result; }
css定义了很多函数，大部分在Sass中运行正常。它们会被解析为函数调用，作为普通css函数被处理，然后原封不动地编译到css。当然也有一些含有特殊语法的不能被解析为SassScript表达式的例外，它们都返回不带引号的字符串。
1）url()
这函数在css中使用非常广泛，但它的语法和其他函数不一样，带引号和不带引号的URL都能接受。Sass会用特殊的逻辑去解析不带引号的URL，因为它不是有效的SassScript表达式。如果参数是个有效的不带引号的URL，那它是咋样Sass就把它解析成啥样，即使可能会有插入文字注入变量。但如果这个不带引号的URL不是有效的，比如带有变量或者函数调用，那它就被解析为正常的普通css函数调用。
$roboto-font-path: "../fonts/roboto"; @font-face { // This is parsed as a normal function call that takes a quoted string. src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2"); font-family: "Roboto"; font-weight: 100; } @font-face { // This is parsed as a normal function call that takes an arithmetic // expression. src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2"); font-family: "Roboto"; font-weight: 300; } @font-face { // This is parsed as an interpolated special function. src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2"); font-family: "Roboto"; font-weight: 400; }
2）calc()，element()，progid:...()，和expression()
calc()和element()定义为css特殊函数，calc()的数学表达式和和Sass的四则运算有冲突，而element()的IDs可能会被解析为颜色值，因此它们需要特殊编译。
expression()和以progid:开头的函数是IE没有写入标准的遗留特性。尽管它们不再被最新的浏览器支持，但是Sass还会去解析它们以向后兼容。
Sass允许向这些函数传入任何文本，包括嵌套内容。除了用于注入动态变量的插入文字，别的都不会被解析为SassScript表达式。
Sass .logo { $width: 800px; width: $width; position: absolute; left: calc(50% - #{$width / 2}); top: 0; } =======================================》 CSS .logo { width: 800px; position: absolute; left: calc(50% - 400px); top: 0; }
3）min()和max()
css在第四版本的取值与单位中添加了对min()和max()函数的支持，并且被Safari迅速采用来适配iphoneX。但Sass很久之前就有自己的min()和max()函数了，所以需要向后兼容已有的样式表。这就需要额外特殊的语法规则了。如果是有效的普通css的min()和max()函数调用，就直接编译为css的min()和max()函数调用。普通css函数包括内置的calc()、env()、var()、min()、max()函数以及插入文字。只要调用的任何部分包括SassScript特性比如变量和函数调用，就会被解析为Sass核心库函数中的min()和max()。
Sass $padding: 12px; .post { // Since these max() calls don‘t use any Sass features other than // interpolation, they‘re compiled to CSS max() calls. padding-left: max(#{$padding}, env(safe-area-inset-left)); padding-right: max(#{$padding}, env(safe-area-inset-right)); } .sidebar { // Since these refer to a Sass variable without interpolation, they call // Sass‘s built-in max() function. padding-left: max($padding, 20px); padding-right: max($padding, 20px); } ====================================》 CSS .post { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .sidebar { padding-left: 20px; padding-right: 20px; }
原文：https://www.cnblogs.com/suqin-marker/p/11093152.html