特点：
1.在css基础上增加特性：变量、嵌套（nesting）、混合（@mixin）、继承（@extend）；
2.通过函数进行颜色值与属性值的运算；
3.提供控制指令等高级功能；
4.自定义输出指令；
数据类型：
Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：
1. 数字(Number): 如，1、 2、 13、 10px；
2. 字符串(String)：有引号字符串或无引号字符串，如，”foo”、 ‘bar’、 baz；
3. 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
4. 布尔型(boolean)：如，true、 false；
5. 空值(null)：如，null；
6. 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。
ps: javascript数据类型：number, string, boolean, null, undefined, object(三大引用类型object, array, function)；es6新增：sysbol, map, set。
变量控制：
1.通过粒度区分，为不同的值取不同的名字。
嵌套（nesting）
普通嵌套
1#main p { 2 color: #00ff00; 3 width: 97%; 4 5 .redbox { 6 background-color: #ff0000; 7 color: #000000; 8 } 9}
父选择器：&
1a { 2 font-weight: bold; 3 text-decoration: none; 4 &:hover { text-decoration: underline; } 5 body.firefox & { font-weight: normal; } 6}
属性嵌套
1.funky { 2 font: { 3 family: fantasy; 4 size: 30em; 5 weight: bold; 6 } 7}
选择器：
1.可以在父选择器之前添加选择器。eg：
1#content aside { 2color: red; 3body.ie & { color: green } 4} 5 6/*编译后*/ 7#content aside {color: red}; 8body.ie #content aside { color: green }
2.子组合选择器和同层组合选择器。
.a > .b ：class a下的直接子元素class b
.a + .b ：class a元素后紧邻的同级兄弟元素class b
.a ~ .b ：class a同级的所有class b
1article { 2~ article { border-top: 1px dashed #ccc } 3>section{background: #eee } 4dl> { 5dt{color: #333 } 6dd{color: #555 } 7} 8nav+ & {margin-top: 0 } 9}
混合宏（@mixin）：定义@mixin，调用@include
作用：混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。
优点：可传参。
缺点：如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码冗余。
1@mixin text-overflow { 2 text-overflow: eclipsis; 3 overflow: hidden; 4 white-space: nowrap; 5} 6 7.message { 8 width: 100px; 9 @includetext-overflow; 10}
混合器传参：
1@mixin link-color($normal, $hover, $visited) { 2 color: $normal; 3 $:hover { 4 color: $hover; 5 } 6 $:visited { 7 color:$visited; 8 } 9} 10 11a { 12 @include link-color(red, blue, yellow); 13}
变量传参数：
1a { 2 @include link-color($normal: red, $hover: blue, $visited: yellow); 3}
默认参数值：
1@mixin link-color($normal:red, $hover:blue, $visited:yellow) { 2 color: $normal; 3 $:hover { 4 color: $hover; 5 } 6 $:visited { 7 color:$visited; 8 } 9}
继承（@extend）：
作用：将重复使用的样式，延伸（extend）给需要包含这个样式的特殊样式。
缺点：如果是类（.class），不管有没有调用（@extend），在编译的时候，都会生成对应的css。
1. 延伸class。
2. 【延伸复杂选择器】Class 选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器。eg：.classA.classB, a:hover, a.classA[href^="http://"]等。
1.hoverlink { 2 @extend a:hover; 3}
3.【多重延伸】同一个选择器可以延伸给多个选择器，它包含的属性将继承给所有被延伸的选择器。多重延伸可以使用逗号分隔选择器名。@extend .error,.attention == @extend .error; @extend .attention;
1.error { 2 border: 1px #f00; 3 background-color: #fdd; 4} 5.attention { 6 font-size: 3em; 7 background-color: #ff0; 8} 9.seriousError { 10 @extend .error; 11 @extend .attention; 12 border-width: 3px; 13}
4. 【继续延伸】当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个
1.error { 2 border: 1px #f00; 3 background-color: #fdd; 4} 5.seriousError { 6 @extend .error; 7 border-width: 3px; 8} 9.criticalError { 10 @extend .seriousError; 11 position: fixed; 12 top: 10%; 13 bottom: 10%; 14 left: 10%; 15 right: 10%; 16}
5. 【选择器列】暂时不可以将选择器列 (Selector Sequences)，比如 .foo .bar 或 .foo + .bar，延伸给其他元素，但是，却可以将其他元素延伸给选择器列。
1#fake-links .link { 2 @extend a; 3} 4 5a { 6 color: blue; 7 &:hover { 8 text-decoration: underline; 9 } 10}
占位符选择器（Placeholder Selectors: %foo）
占位符选择器，看起来很像普通的 id 或 class 选择器，只是 # 或 . 被替换成了 %。可以像 class 或者 id 选择器那样使用，当它们单独使用时，不会被编译到 CSS 文件中。
占位和继承基本类似，唯一不同的是，相同的生成CSS块并没有在类中存在，而是额外声明。如果不调用已声明的占位符，将不会产生任何CSS。如果在不同选择器调用占位符，那么编译出来CSS将会把相同的代码合并在一起。@extend-Only Selectors
缺点：不能传参。建议使用此选择器，而非（@extend）。
1%mt15 { 2 margin-top: 15px; 3} 4%pt15{ 5 padding-top: 15px; 6} 7 8.btn6 { 9 @extend %mt15; 10 @extend %pt15; 11} 12.block { 13 @extend %mt15; 14 @extend %pt15; 15} 16 17%mt15 { 18 margin-top: 15px; 19} 20%pt15{ 21 padding-top: 15px; 22} 23 24.btn6 { 25 @extend %mt15; 26 @extend %pt15; 27} 28.block { 29 //@extend .btn6 30 @extend %mt15; 31 @extend %pt15; 32}
对比如下：
参考：https://www.cnblogs.com/alice-shan/p/4956302.html
条件语句
@if
1p { 2 @if 1 + 1 == 2 { border: 1px solid; } 3 @if 5 < 3 { border: 2px dotted; } 4}
@else
1@if lightness($color) > 30% { 2 background-color: #000; 3 } @else { 4 background-color: #fff; 5 }
循环
@for
1 @for $i from 1 to 10 { 2 .border-#{$i} { 3 border: #{$i}px solid blue; 4 } 5 }
@while
1$i: 6; 2 3@while $i > 0 { 4 .item-#{$i} { width: 2em * $i; } 5 $i: $i - 2; 6}
@each
1$direction: 'left', 'right', 'top', 'bottom'; 2 3//set padding 4@each $dir in $direction { 5 @each $value in '0', '5', '10' { 6 .pd-#{$dir}-#{$value} { 7 padding-#{$dir}: #{$value}px; 8 } 9 } 10}
自定义函数
1@function double($n) { 2 @return $n * 2; 3} 4 5 6#sidebar { 7 width: double(5px); 8}
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite\_code=alxx9wrtnw2