sass（scss）10大常用重要特性

　　 用sass用了好久，期初看中的是他的嵌套功能，因为刚开始的时候是用jquery，电脑安装Ruby，全局安装sass，将scss编译为css，
不得不说真的很方面，节点套节点，和html的很类似。但是后来用了vue等框架后，嵌套功能远远不能满足需求。做移动端，需要适配，当
时抛弃了rem，使用vw，但是如果每个自己计算就很麻烦，当时想的是要是css可以像js那样，写一个函数转换，然后调用函数就好了。于
是初识了sass的函数，此后还有变量什么的。最近花了点时间，将sass全看了一遍，做一下总结吧
　　以下是我项目中用的比较多，或者个人觉得比较重要的特性。
　　　　1.（节点）可嵌套性（这个是基础，用的太多太多了，必须掌握）
　　　　2. 变量：变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一个变量，以后调用变量就好了，很类似js里的变量）
　　　　3. Mixins(混合@mixin)：可重用性高，可以注入任何东西
　　　　　　注意点： 1.可以相互调用，但是不能拿自己调用自己，形成递归
　　　　　　　　　　 2.通过@include引用
　　　　　　例子：
　　　　　　　　@mixin banner {
　　　　　　　　　　width: 100%;
　　　　　　　　　　position: relative;
　　　　　　　　　　color: $deeepBlue;
　　　　　　　　　　.banner-content {
　　　　　　　　　　　　position: absolute;
　　　　　　　　　　　　top: 50px;
　　　　　　　　　　　　width: 100%;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　.lead-banner {
　　　　　　　　　　@include banner;
　　　　　　　　}
　　　　4. @extend：允许一个选择器继承另一个选择器
　　　　　　例子:
　　　　　　　　.a1 {
　　　　　　　　　　color: blue;
　　　　　　　　}
　　　　　　　　.a2 {
　　　　　　　　　　@extend .a1;
　　　　　　　　　　font-size: 12px;
　　　　　　　　　　}
　　　　5. @function:函数功能，用户使用@function可以去编写自己的函数（常用）
　　　　　　使用语法： 使用 @function+函数名称，每个函数都需要有返回值的内容
　　　　　　例子:
　　　　　　　　@function du($r) {
　　　　　　　　　　@return $r*2
　　　　　　　　}

　　　　　　　　.a8 {
　　　　　　　　　　border: solid #{du(2)}px red;
　　　　　　　　}
　　　　6. 引用父元素&：在编译时，&将被替换成父选择符（常用）
　　　　　　例子:
　　　　　　　　a {
　　　　　　　　　　font-size: 20px;
　　　　　　　　　　text-decoration: none;
　　　　　　　　　　&:hover {
　　　　　　　　　　　　text-decoration: underline;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　编译后:
　　　　　　　　a {
　　　　　　　　　　font-size: 20px;
　　　　　　　　　　text-decoration: none;
　　　　　　　　　}
　　　　　　　　a:hover {
　　　　　　　　　　text-decoration: underline;
　　　　　　　　　}

　　　　7. 计算功能（会用 但是不多吧）
　　　　　　例子:
　　　　　　　　p {
　　　　　　　　　　margin: 20px + 30px;
　　　　　　　　　　width: (100% / 6)；
　　　　　　　　}
　　　　　　编译后：
　　　　　　　　p {
　　　　　　　　　　margin: 50px;
　　　　　　　　　　width: 16.6666666667%;
　　　　　　　　}
　　　　8. 组合连接： #{} ： 变量连接字符串（目前用到的是这个）
　　　　　　例子：
　　　　　　　　$name: foo;
　　　　　　　　$attr: border;
　　　　　　　　p.#{$name} {
　　　　　　　　　　#{$attr}-color: blur;
　　　　　　　　}

　　　　　　被编译为：
　　　　　　　　p.foo {
　　　　　　　　　　border-color: blur;
　　　　　　　　}
　　　　9. 循环语句：（很少用到）
　　　　　　例子：
　　　　　　　　@for $i from 1 to 10 {
　　　　　　　　　　.a5_img#{$i} {
　　　　　　　　　　　　background-image: url('images/img#{$i}.png');
　　　　　　　　　　}
　　　　　　　　}

　　　　　　　　@while $j>0 {
　　　　　　　　　　.a5_img#{$j} {
　　　　　　　　　　　　background-image: url('images/img#{$j}.png');
　　　　　　　　　　}
　　　　　　　　　　$j:$j - 1;
　　　　　　　　}

　　　　　　　　@each $item in 1,2,3,4,5 {
　　　　　　　　　　.a5_img#{$item} {
　　　　　　　　　　　　background-image: url('images/img#{$item}.png');
　　　　　　　　　　}
　　　　　　　　}
　　　　10. if语句：（很少用到）
　　　　　　例子：
　　　　　　　　@mixin bgcolor($b) {
　　　　　　　　　　@if($b==5) {
　　　　　　　　　　　　background-color: #fff;
　　　　　　　　　　} @else if($b == 6) {
　　　　　　　　　　　　background-color: green;
　　　　　　　　　　} @else {
　　　　　　　　　　　　background: blue;
　　　　　　　　　　}
　　　　　　　　}

　　总结1： 目前用的最多的或者个人觉得比较重要点，以后可能会用到的大概是这10个吧，sass还有其他的特性，这是我自己总结出来的觉得
比较nice的。还有一点需要注意，引用sass是使用@import，sass编译有一个特点，就是当一个sass或scss的文件名以下划线_
开头，那么这个文件就不会被编译。一般定义基础样式的时候会选择这个。

　　总结2： sass与scss的区别：（其实是一种东西）
　　　　1. scss是sass3引入的新语法，语法完全兼容css3， 继承了sass的功能
　　　　2. scss和sass大部分语法相同，唯一不同的是，scss需要使用分号和花括号，sass是以严格的缩进式语法缩写---换行和缩进
　　　　3. 文件扩展名不同