sass

本文内容来自sass中文文档，想看详细信息请移步至sass中文文档：https://www.sass.hk/docs/

1.sass与scss区别：https://www.cnblogs.com/jeacy/p/9776479.html
所有有效的CSS3样式也同样适合于Sass。说白了Scss就是Sass的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。 Scss 的语法书写CSS 语法书写方式非常类似。

2.嵌套规则
内层样式将外层选择器当做父级选择器

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

编译为

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

3.父选择器 &

• &会替换成嵌套外层的父选择器 （只会替换父选择器）

#main {
    color: black;
    a {
      font-weight: bold;
      &:hover { color: red; }
    }
  }

编译为

#main {
    color: black;
}

#main a {
    font-weight: bold;
}

#main a:hover {
    color: red;
}

• & 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，当父选择器含有不合适的后缀时，Sass 将会报错

#main {
color: black;
&-sidebar { border: 1px solid; }
}
编译后
#main {
color: black;
}

#main-sidebar {
border: 1px solid;
}

4.属性嵌套
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
编译为
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}

命名空间也可以包含自己的属性值
.funky {
font: 20px/24px {
family: fantasy;
weight: bold;
}
}
编译为：
.funky {
font: 20px/24px;
font-family: fantasy;
font-weight: bold;
}

5.占位符选择器 %代替#、.

• 定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用,可以像 class 或者 id
  选择器那样使用，当它们单独使用时，不会被编译到 CSS 文件中。
• 占位符选择器需要通过延伸指令使用，用法与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。

#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}

.notice {
@extend %extreme;
}
编译为
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em; }

6.注释 / / 与 //
/ /会被完整输出到编译后的 CSS 文件中，//则不会

将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。

7.变量 $和插值语句 #{}

• 变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明
  #main {
  $width: 5em !global;
  width: $width;
  }

#sidebar {
width: $width;
}
编译为
#main {
width: 5em;
}

#sidebar {
width: 5em;
}

• 可以在变量的末尾添加!default,此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

$content: null;
$content: “Non-null content” !default;

#main {
content: $content;
}
编译为
#main {
content: “Non-null content”; }

• #{} 引号字符串将被编译为无引号字符串

@mixin firefox-message( $ selector) {
body.firefox #{$selector}:before {
content: “Hi, Firefox users!”;
}
}
@include firefox-message(".header");
编译为
body.firefox .header:before {
content: “Hi, Firefox users!”; }

• 在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值，空的值被视作插入了空字符串，则不显示
  p:before {
  content: “I ate #{5 + 10} pies!”;
  }

p:before {
content: “I ate 15 pies!”; }

假设$value:null
"Ddffgg #{ $value }cdeef " 编译为 "Ddffggcdeef"

( 假设变量为 $value,则只要使用#{ $value }就会显示 $value的值）

8.数据类型

• 数组
  nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组中添加新值；而 @each 指令能够遍历数组中的每一项。
  用 () 表示不包含任何值的空数组，如果数组中包含空数组()或空值(null)，编译时将被清除（如 1,2，（），3 则变成1,2,3） 基于逗号分隔的数组允许保留结尾的逗号，这样做的意义是强调数组的结构关系，尤其是需要声明只包含单个值的数组时。例如 (1,) 表示只包含 1 的数组，而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。

注意：(1px 2px) (5px 6px) 与 1px 2px, 5px 6px 在编译后的 CSS 文件中是完全一样的

9.除法运算 / (Division and /)
/ 在 CSS 中通常起到分隔数字的用途，sass也通用，但以下三种情况 / 将被视为除法运算符号：
如果值，或值的一部分，是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹
p {
$font-size: 12px;
$line-height: 30px;
font: #{ $font-size}/#{ $line-height}; //编译为12px/30px
}

10.颜色值运算
颜色值的运算是分段计算进行的（加法对着运算 乘法分段分别乘 像数学加法、乘法运算）
如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
编译为
p {
color: rgba(255, 255, 0, 0.75); }

颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。

$ translucent-red: rgba(255, 0, 0, 0.5);
p {
color: opacify($ translucent-red, 0.3);
background-color: transparentize($translucent-red, 0.25);
}

p {
color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.25); }

E 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 #AABBCCDD，使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。
$a:rgba(255,0,0,0.5);
$green:#00ff00
#{ie-hex-str （ $a ）}
#{ie-hex-str （ $green ）}
编译为
#80FF0000
#FF00FF00

11. 字符串运算
相加：左侧有引号则结果为引号 无引号则连接

12.@import
允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import

用法：@import 文件名（可不加后缀 一个或多个文件名 要是多个文件导入，记得用 ,）

导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

编译为：

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

@import 仅作为普通的 CSS 语句场景
文件拓展名是 .css；
文件名以 http:// 开头；
文件名是 url()；
@import 包含 media queries。

13.分音
导入的.scss/.sass文件不希望编译为CSS，则只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略