SASS (a)

*** Personal Sass notes series, refer to the official document translation, for a better understanding and use for future reference, please correct me if inappropriate ~ ***

Syntax (Syntax)

Overview (Overview)

　Sass supports two syntax, you can use to introduce each other, so use more casual kind of depends on what you and your team how to love.

1）SCSS

　　SCSS syntax .scss as the file extension. Few exceptions, it is a superset of css, that all valid css is valid scss, meaning its name. And css similarity makes it the most popular best to use the syntax.

　　scss file is probably a long way:

@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) indentation syntax (The Indented Syntax)

　　The syntax is the syntax indentation sass originally used, so use .sass as the file extension, so this syntax is sometimes also called SASS. SCSS indentation syntax supports all the features, differing only in the way of formatted documents from the curly braces and semicolons replaced indent it, likewise meaning to its name. But compared to SCSS there are a number of different places, one by one will be explained in the next part of the tutorial.

　　Indent Syntax probably a long way:

@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

Analytical stylesheet (Parsing a Stylesheet)

　　　S ASS style sheet is directly resolved from the Unicode code (Unicode code points) over the skip the process, into a stream of tokens (token stream) of.

1) input code

　　In general, a document or original byte stream that time is ok, but it must be decoded into Unicode drops. Sass decoding principle is as follows (in principle at present only partially translated, later supplemented):

• • If the byte stream in UTF-8 or UTF-16 encoding a <the U-+ the FEFF> the BOM ( BYTE  the ORDER  beginning MARK), the corresponding decoding rule to use.

• • 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) parse error

　　Sass when parsing a style sheet if you encounter a syntax error, parsing will fail, and will throw with invalid syntax error location and cause information to the user. This is different and css, css focus on the experience of most errors continue, this is not an example of Sass css superset of the strict sense. Sass This allows the user to see the error immediately, rather than letting the error output with 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.（日后再补...）

Stylesheet structure (Structure of a Stylesheet)

　　Most Sass css stylesheets and almost all major style rule contains a property declaration composition, but otherwise Sass has many other features.

1) statement (Statements)

　　Style sheet consists of a series of statements, resulting css final decision by these statements. Some statements may contain statements other comprising a block (defined by the {and}). Specifically, the style rules are statements with blocks, these blocks contain other statements, such as property declaration.

　　Sass in statements separated by semicolons (if the block contains statements that you can not), use the syntax indentation words separated by line breaks.

　　1. Global Statement (Universal Statements)

　　　　This statement can be used anywhere in the Sass:

• • Variable Definition: e.g.  $ var: value 
  • Flow control statements: e.g.  @if  and  @each  ;
  •  @error 、 @warn 和 @debug 。

　　2.css statement

　　　这些语句会生成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;
}