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. 文件扩展名不同
