今天，我們來深入詳細(xì)帶實(shí)例地講一下css預(yù)處理器--SASS

• sass編譯器 在線+軟件
• 重點(diǎn)拎一拎 -- 特好使的自動(dòng)編譯器軟件 Koala
• 變量使用
• 父子級(jí)標(biāo)簽嵌套
• 繼承 @extend
• 導(dǎo)包 @import
• mixins
• @media媒體查詢結(jié)合mixin
• 操作符
• sass社區(qū)
• 流行的sass框架

sass

官網(wǎng)

超贊sass社區(qū): thesassway

一、編譯器

1.在線編譯器： SassMeister

SassMeister

2.在線 CodePen

CodePen

3.軟件自動(dòng)編譯器 Koala

標(biāo)志性logo真的很可愛

image

項(xiàng)目拖進(jìn)去

使用Koala有幾大好處...

• 自動(dòng)編譯：將項(xiàng)目拖到界面中第一次編譯后，本地項(xiàng)目里自動(dòng)生成css文件，實(shí)時(shí)更新，所以你只需要放心大膽寫你的scss，在html文件里引入它對(duì)應(yīng)的css文件就OK啦
• 語法錯(cuò)誤提示：編譯的時(shí)候本身就會(huì)去檢測(cè)，語法錯(cuò)誤肯定報(bào)錯(cuò)提示，在右下角彈出紅框框
• 多語言都支持：不僅僅是Sass,還有Less，CoffeeScript都能編譯
• 嗯！免費(fèi)！這才是重點(diǎn)....

二、變量引入(variables)：

1.png

• 變量賦值直接引用

$commonColor:red; //這里賦變量
.nav{
color:$commonColor;  //后續(xù)都可以直接用變量
}

三、嵌套(nesting):

• 自己就不需要打那么多父級(jí)標(biāo)簽來限制；
• 在tab切換引發(fā)樣式，背景圖等改變起來方便得多

2.png

.site-header nav {
    ul {
        padding: 0;
        margin: 0;
    }
    
    li {
        list-style: none;
        float: left;
    }
}  //一直可以父元素套子元素

• 這個(gè)在我做移動(dòng)端開發(fā)不同tab欄切換圖標(biāo)背景簡(jiǎn)直完美！

tab切換

繼承

• 例子：類.btn-b和類.btn-a樣式一樣，

4.png

.btn-a{
    啦啦啦，這是我的各種樣式
}
.btn-b{
    @extend .btn-a;  // 聽btn-a的話，沒毛病，100分！
    啦啦啦，后續(xù)繼續(xù)寫自己的樣式；
}

• 例2：

.group:before, .group:after {
    content: "";
    display: table;
}

6.png

五、引入@import

• 單獨(dú)將某一塊scss拎出來作為小模塊，該用的時(shí)候就@import引進(jìn)來

• 按照習(xí)慣，給這個(gè)外部的scss文件命名前面加下劃線_：

8.png

• 需要的時(shí)候就@import：

9.png

六、強(qiáng)大的Mixins

• 例子：為了設(shè)置一個(gè)漸變，我們不得不將所有可能的瀏覽器適配的代碼都寫上去，僅僅為了一個(gè)效果，后期想修改也需要，復(fù)用性也低

10.png

• 解決方案：

  
  
  12.png

$borderColor:#ec7785;  //變量
.btn-a {
  display: inline-block;
  padding:15px;
  margin-right: 10px;
  border:1px solid $borderColor;
}

//這是你用mixin包裝好的verticalGradient方法，傳入?yún)?shù)變量
@mixin verticalGradient($fromColor,$toColor) {
  background-image: linear-gradient(to bottom, $fromColor, $toColor);
}
.btn-b{
  @extend .btn-a;  //繼承
  border-radius:5px 5px;
  @include verticalGradient(blue,red); //引入mixin的方法，傳入你想要的顏色值
}

11.png

• sass開心易理解，我們也開心，少寫代碼咯~

• 我們也可以把這個(gè)mixin代碼提取出來放到單獨(dú)的文件里：_mixins.scss；需要的文件就

@import 'mixins' //文件名導(dǎo)入

• 眼不見，心不煩，哇，代碼又少啦；(不然呢，你看bootstrap4怎么辣么多下劃線開頭的scss文件)

七、@media結(jié)合mixins

/* Media Query Mixins*/
@mixin sm-width { //定好的兩個(gè)mixin，小屏幕和中等屏幕的media query媒體查詢
  @media only screen and (max-width: 400px) {
    @content; //沒啥特殊意義，就指你引入這個(gè)mixin后，這地兒是你的地盤，可以自由寫樣式
  }
}
@mixin ml-width {
  @media only screen and (min-width: 1100px) {
    @content;  
  }
}

• 需要的時(shí)候@include 這在自適應(yīng)的時(shí)候特別方便，

li {
  list-style: none;
  float: left;
  margin-right:10px;
  @include sm-width { //小屏幕時(shí)一行一個(gè)li
    float: none;
    margin-right: 0;
    margin-bottom: 2px;
  }
  @include ml-width {  //中大屏幕時(shí)每個(gè)li有5px右邊距
    margin-right:5px;
  }
}

屏幕適配

• 例2：根據(jù)屏幕寬度調(diào)整頁(yè)面字體大?。?/li>

html {
  font-size: 1em;
  @include sm-width {
    font-size: .8em;
  }
  @include ml-width {
    font-size: 1.4em;
  }
}

八、支持操作符

• 運(yùn)算操作符：

.box {
    width:100px + 200px; //可識(shí)別，一共300px
}

• 邏輯操作
• 一些命令指令，表達(dá)式
• 等等...
• 這個(gè)博主寫的不錯(cuò)，推一下啦,可惜沒有廣告費(fèi)~

流行的Sass框架和社區(qū),大佬們時(shí)常更新耐心解答

• Compass
• Bourbon
• Susy
• 有空繼續(xù)給你嘮嘮嗑，講講這幾個(gè)框架網(wǎng)站啥的

哇咔咔，小仙女想去逛街

• 不容易啊小仙女，忍住逛街的誘惑碼字，
  嗯。一定是學(xué)習(xí)使我快樂

  
  
  學(xué)習(xí)與思考使我保持清醒