Sass的筆記彙總

安裝

我以Hbuilder爲例，上來直接傻瓜式安裝

而在Vue項目中安裝後看這裏，比如是一本書，目錄裏有你要的這節課

cnpm install sass sass-loader -S

我在Vue測試是否成功，後面的再細講

---

第一節

爲何我剛纔第一步使用的是 scss而不是 sass呢？
由於口味不一樣，咱們看本來的css是這樣的

#app{
    width: 100px;
    height: 100px;
    background-color: #000;
}

#app span{ color:#fff }

sass口味特別重，跟我吃臭豆腐同樣爽！吃能夠，可是我不會多吃。在sass裏 不讓用{} 和 ； 並且子級的位置必定要固定，差一點都不行。
sass猥瑣笑着說：看着費勁不，老鐵o( ￣︶￣)o

<style lang="sass">
#app
    width: 100px
    height: 100px
    background-color: #000
    span 
    color:#fff
</style>

scss好像青蘋果，跟普通的蘋果同樣。他和本來的css本體不變，裏面卻別有風味

#app{
    width: 100px;
    height: 100px;
    background-color: #000;
    span{
       color:#fff;
    }
}

---

第二節 變量

js中的變量就是var a = '123456789十JQKA'
而scss中是這樣使用的
好處在於大項目全局風格是固定的三四個，你若是作color:#000000 #ffffff重複寫N次，有了他能重複使用
注意兩點：一個是$，一個是：
我第一次用竟然用上了等號
$xxx:#000

第三節 輸出格式

其實就是看你下次查找css時方便不方便，若是你一生都不會再改那就換成沒有空格一條橫線的compressed壓縮。倍爽！歐耶
nested：嵌套

ul{
   color:#000 }
  ul li{
   color:#000 }

compact：緊湊

ul{ color:#000 }
ul li{ color:#000 }

expanded：擴展

ul{ 
   color:#000 
}
ul li{
   color:#000 
}

compressed：

ul{color:#000 }ul li{color:#000 }

可是我通常不用，百度一搜就能一鍵壓縮，或者一鍵自動換行

---

第四節 嵌套方式

以前開頭簡單說了，就是一層一層的嵌套和被嵌套
&至關於加一個:hover, 若是不加&將成了 a 　 　:hover這個打空格
最恨的就是用&變成了一個自創名稱：出來就變成了#app-cnm

#app{
    color: #000;
    span{
        width: 100px;
        height: 100px;
        &:hover{
            color: #42B983;
        }
    }
    &-cnm{
      background:#000
    }
}

---

第五節 屬性嵌套

這個純屬愛好，愛用不用的一種。你們知道就好。
曾經我們設置某些屬性的名稱很像。

#app{
    font-size: 14px;
    font-family: '微軟雅黑';
    font-weight: 800;
}

現在我們又出新花樣,把前面同樣的font分出來加一個 : { ... }

#app{
   font:{
          size: 14px;
          family: '微軟雅黑';
          weight: 800;
        }
}

---

第六節 mixin

這個英文發音：妹可森， 混合的意思
記住他方式：蜜心（mi，xin）
他在乎思是什麼？你曾幾什麼時候有沒有這樣的現象!
我在第一個頁面裏用了a,隔了幾天創了無數個頁面到z的時候，發現a的裏面和z的如出一轍。可是這個頁面必須用z!這該怎麼辦

.a{
    width:100px;
    height:100px;
    background:#000;
    color:"#fff";
}

.z{
    width:100px;
    height:100px;
    background:#000;
    color:"#fff";
}

那就是這個mixin,起一個名字之後想用直接艾特他，沒錯！是艾特@這個符號。@include
你能夠當作：

@建立 誰誰誰	@使用的 誰誰誰
@mixin cnm	@include cnm

@mixin cnm{
    width:100px;
    height:100px;
    background:#000;
    color:"#fff";
}

.a{
    @include cnm
}

一樣是這裏，還有一種玩法！就是任意時隨便加顏色.這頁面就能直接切換主題。分兩種，一種是按順序，一個是不須要順序

@mixin cnm($txt-color, $bg-color){
    width:100px;
    height:100px;
    background:$bg-color;
    color:$txt-color;
    text-shadow: 0 0 15px darken($bg-color, 30%)
}

.a{
    @include cnm(#ffffff, #000000)
    @include cnm($txt-color:#ffffff, $bg-color:#000000)
    //二選一，一個固定順序， 一個沒有順序
}

---

第七節 「和」 「擴展」

說一句話來形同：bb本來很沒出息，什麼都沒有！aa說我把@extend給你。你就不會那麼窮了

.aa{ padding: 15px; }
.aa a{ margin: 100px; }    
.bb{    
    @extend .aa;
    background: #000;
}

.aa, .bb {
  padding: 15px;
}

.aa a, .bb a {
  margin: 100px;
}

.bb {
  background: #000;
}

---

第八節 @import

跟當年我們引入無數個.css文件。你會發現本身頁面沒寫多少，引入進來文件太多！
這個scss這招就在， 在這個scss文件裏引入！而不是在html引入
我在sb.scss

@import "./assets/sb.scss";
.aa{
    padding: 15px;
}

---

第九節 lighten和darken

高亮和變暗
其實就是把本來的顏色，按比例加深減淡

$sb: lighten(#cccccc, 10% );

.ss{
    background: $sb;
}