Sass常用的寫(xiě)法：
1.引入函數(shù)編程的思想加入變量的，變量的寫(xiě)法是$aaa: red,以$開(kāi)頭，后面使用時(shí)就直接使用$aaa,若要拼接使用則需要用#{$aaa}來(lái)包裹變量。例如：
$position: left；
div{
????? border-#{$position}:1px solid #ccc;
}
2.sass中容許使用計(jì)算功能，簡(jiǎn)單的加減乘除都可以使用：
div{
????? width: 100px + 100px;
????? height: (500px/2);?????????????????? /*注意除號(hào)要用括號(hào)裝起來(lái)*/
????? border: 1*5px solid #ccc;
????? }
3.嵌套寫(xiě)法
之前我們寫(xiě)的后代元素選擇器? div p {font-size： 18px;},sass中的寫(xiě)法如下：
div{
???? p{
??????? font-size: 18px;
???????}
}
4.屬性寫(xiě)法的嵌套（必須帶上冒號(hào)：，與選擇器嵌套的區(qū)別）例如下面書(shū)寫(xiě)div的border-radius：
div{
???? border:{
????????? radius:?50%；
???? }
}
5.在嵌套代碼塊內(nèi)使用$代表父元素，例如a:hover可如下書(shū)寫(xiě)：啊：
a{
???????&:hover{
????????????? background: yellow;
?????? }
}
6.三種注釋都可以幾種略微有所不同如下：
/*注釋*/這種css的標(biāo)準(zhǔn)注釋 編譯后也會(huì)存在
// 只保存在sass文件中，編譯后會(huì)不存在了
/*！*/表示重要信息，通常用于版本版權(quán)信息
7.樣式的繼承：例如之前的把兩個(gè)擁有相同樣式的寫(xiě)在一起。sass寫(xiě)法如下：
.class1 {color: red;background: yellow; border: 1px solid;}
.class2 {
??????????? @extend .class1;
??????????? font-size： 20px;
}
/*這樣class2類(lèi)中就具有了class1的所有的樣式*/
8.Mixin，如同react和vue中的引入公共塊一樣，這里也是代表可以重用的代碼塊
使用@mixin定義一個(gè)代碼塊：
@mixin gogo{
???????? width: 100px;
???????? height: 200px；
}
使用”@include 名稱(chēng)“引入這個(gè)代碼塊：
div{
???? @include gogo;
???? color: red;
}
mixin一個(gè)強(qiáng)大的大方可以向函數(shù)一樣傳遞參數(shù)，可以根據(jù)傳遞的額不同參數(shù)給不同的元素不同的值
@mixin gogo($num: 200px){??? //若這里寫(xiě)了參數(shù)值則是默認(rèn)值，也可以傳多個(gè)參數(shù)
???? height: $num;
}
div{
???? @include gogo（500px）? // 此處傳參，若是不傳參則為默認(rèn)值
}
9.@import用來(lái)插入文件，若插入的是.css文件，則等同于css的import,如引入.scss文件，則直接@import "style/a.scss"
10.高級(jí)用法
??? 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)
}
