***个人Sass笔记系列，参考官方文档翻译，作加深理解和日后查阅使用，若有不当之处欢迎指正~***

语法（Syntax）

总览（Overview）

　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

样式表解析（Parsing a Stylesheet）

　　　Sass样式表是直接从Unicode码位（Unicode code points）解析过来的，跳过了转换为记号流（token stream）的过程。

1）输入编码

　　通常，一个文档还是最初的那个字节流的时候是ok的，但是，它必须是要解码成Unicode滴。Sass的解码原则如下（原则目前只翻译部分，日后再补）:

- 如果字节流以UTF-8或者UTF-16编码的<U+FEFF>BOM（BYTE ORDER MARK）开头，就使用相应的解码规则。

- If the sequence of bytes begins with the plain ASCII string @charset, Sass determines the encoding using step 2 of the CSSalgorithm for determining the fallback encoding.

- Otherwise, UTF-8 is used.

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.（日后再补...）

样式表结构（Structure of a Stylesheet）

　　大多数Sass样式表和css差不多，都主要由包含属性声明的样式规则组成，但除此之外Sass有很多其他特性。

1）语句（Statements）

　　样式表由一系列的语句组成，最终生成的css都由这些语句决定。有些语句会包含含有其他语句的块（由 { 和 } 定义）。具体来说，样式规则是带有块的语句，这些块含有其他语句，比如属性声明。

　　Sass里语句由分号分隔（如果语句被块包含就可以不用），使用了缩进语法的话则由换行符分隔。

　　1.全局语句（Universal Statements）

　　　　这种语句在Sass任何地方都可以使用：

- 变量定义：例如 $var:value
- 流控制语句：例如 @if 和 @each ；
- @error 、 @warn 和 @debug 。

　　2.css语句

　　　这些语句会生成css，在任何地方都可以使用除了 @function 中：

- 样式规则：例如 h1{/*...*/} ；
- css at-rulls：例如 @media 和 @font-face ；
- @include 引入的混合类型使用；
- at-root规则。

　　3.头部语句

　　　只能在样式表的头部或者嵌套css语句的头部使用：

- @import 引入语句；
- @mixin 混合类型定义；
- @function 函数定义；

　　4.其他语句

属性声明：例如 width: 100px; ，只能在样式规则或者一些css at-rules中使用；
@extend 扩展规则：只能在样式规则中使用。

2）表达式（Expressions）

　　表达式放在属性或者变量声明右边，可以得出一个值。任何有效的css属性值都是一个Sass表达式，但是Sass表达式比普通的css值有用多了。它们可以作为参数传递给混合类型和函数，在控制流语句 @if 中使用，进行四则运算。我们称Sass的表达式语法为SassScript。

　　1.字面量（Literals）

　　　最简单的表达式只代表静态值：

Numbers：带不带单位都行比如 12 或者 100px ；
Strings：有没有引号都行比如 "Helvetica Neue"或者 bold ；
Colors：可以使用十六进制或者名字进行索引比如 #c6538c 或者 blue ；
Booleans：true/false；
Null
Lists of values值列表：以空格或者逗号分隔，包含或者不包含在方括号中，比如 1.5em 1em 0 2em, Helvetica, Arial, sans-serif, 或者 [col1-start] ；
Maps：有所关联的一些键值对比如 ("background": red, "foreground": pink) 。

　　2.运算式（Operations）

　　　Sass定义了许多运算式语法：

- == 和 != 用来比较两个值是否相等；
- +、-、*、/ 和 % 就是正常的数学运算规则，也具有与科学单位用法相匹配单位的特殊行为（我也不知道这里在说啥，但是这几个我会用就成了...）；
- <、<=、>、>= 用来比较两个数字之间的大小关系；
- and、or 和 not 就是正常的布尔运算，Sass里除了false和null都是true；
- +、-、/ 可以用来连接字符串；
- （）可以明确运算优先级。

　　3.其他表达式

- 变量例如 $var ；
- 函数调用例如 nth($list,1) 或者 var(--main-bg-color) ，它们会调用Sass核心库函数或者用户定义函数，或者直接被编译为css。
- 特殊函数比如 calc(1px + 100%) 或者 url(http://myapp.com/assets/logo.png) ，它们具有自身特定的解析规则；
- 父选择器&；
- ！important，会被解析成不带引号的字符串。

注释（Comments）

　　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;
}

特殊函数（Special Functions）

　　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;
}

SASS（一）