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