Sass常用的寫法：
1.引入函數(shù)編程的思想加入變量的饱苟，變量的寫法是$aaa: red,以$開頭蒋伦，后面使用時就直接使用$aaa,若要拼接使用則需要用#{$aaa}來包裹變量恩够。例如：
$position: left概行；
div{
????? border-#{$position}:1px solid #ccc;
}
2.sass中容許使用計算功能瓣颅，簡單的加減乘除都可以使用：
div{
????? width: 100px + 100px;
????? height: (500px/2);?????????????????? /*注意除號要用括號裝起來*/
????? border: 1*5px solid #ccc;
????? }
3.嵌套寫法
之前我們寫的后代元素選擇器? div p {font-size： 18px;},sass中的寫法如下：
div{
???? p{
??????? font-size: 18px;
???????}
}
4.屬性寫法的嵌套（必須帶上冒號：，與選擇器嵌套的區(qū)別）例如下面書寫div的border-radius：
div{
???? border:{
????????? radius:?50%唬涧；
???? }
}
5.在嵌套代碼塊內(nèi)使用$代表父元素疫赎，例如a:hover可如下書寫：啊：
a{
???????&:hover{
????????????? background: yellow;
?????? }
}
6.三種注釋都可以幾種略微有所不同如下：
/*注釋*/這種css的標準注釋 編譯后也會存在
// 只保存在sass文件中碎节，編譯后會不存在了
/*捧搞！*/表示重要信息，通常用于版本版權(quán)信息
7.樣式的繼承：例如之前的把兩個擁有相同樣式的寫在一起狮荔。sass寫法如下：
.class1 {color: red;background: yellow; border: 1px solid;}
.class2 {
??????????? @extend .class1;
??????????? font-size： 20px;
}
/*這樣class2類中就具有了class1的所有的樣式*/
8.Mixin胎撇，如同react和vue中的引入公共塊一樣，這里也是代表可以重用的代碼塊
使用@mixin定義一個代碼塊：
@mixin gogo{
???????? width: 100px;
???????? height: 200px殖氏；
}
使用”@include 名稱“引入這個代碼塊：
div{
???? @include gogo;
???? color: red;
}
mixin一個強大的大方可以向函數(shù)一樣傳遞參數(shù)晚树，可以根據(jù)傳遞的額不同參數(shù)給不同的元素不同的值
@mixin gogo($num: 200px){??? //若這里寫了參數(shù)值則是默認值，也可以傳多個參數(shù)
???? height: $num;
}
div{
???? @include gogo（500px）? // 此處傳參雅采，若是不傳參則為默認值
}
9.@import用來插入文件爵憎，若插入的是.css文件慨亲，則等同于css的import,如引入.scss文件，則直接@import "style/a.scss"
10.高級用法
??? 10.1 if條件判斷
?????? p{
????????????? @if 1+5==6 {color: red;font-size: 28px}
??????????????@if 5<3 {border: 1px solid #ccc}
??????? }
? ? ? 10.2 if...else...
? ? ? p{
???????? ?@if 1+5 == 6 {
???????????? ?? color: red;font-size: 28px宝鼓；
???????? ?}@else{
??????????? ????color: green;font-size:?100px;
???????? ?}
????? ?}?
11.sass函數(shù)刑棵，sass永許自定義函數(shù)
@function gogo($num){
??????? @return $num+10px
}
div{
???? font-size： gogo(20px)
}
