SASS知識點

sgosky發表於2017-12-01

SASS介紹

css前處理器。其實還有用的很多的less，stylus。
SASS支援所有css語法
基礎的檔案命名方法以_開頭

準備工具

SASS編譯工具
?官方下載地址，下載對應版本

用法：

  1. 將專案中的css資料夾拖入Koala
  2. 建立sass檔案 字尾demo.sass (Koala會自動編譯成demo.css)
  3. demo.html正常引入demo.css 檔案

SASS基礎知識

變數

demo.scss

$bg-color : #00a1e9;
$bg-red : red;
$nav-height : 50px;

body{
    background: $bg-color;
}
.demo{
    height:$nav-height / 2;
}

編譯檔案 demo.css

body {
  background: #00a1e9; 
}
.demo {
  height: 25px;
}

巢狀

demo.scss

a{
    &:hover{
        .demo{
            background: $bg-red; 
        }
    }
    
}

編譯檔案 demo.css

a:hover .demo {
  background: red; 
}

繼承

demo.scss

.sub-title {
      color: #666;
      margin: 0;
      text-align: center;
      font-size: 32px;
      font-weight: bold;
}
p {
      @extend .sub-title;
      background: #fff;
}

編譯檔案 demo.css

.sub-title, p {
  color: #666;
  margin: 0;
  text-align: center;
  font-size: 32px;
  font-weight: bold; 
}

p {
  background: #fff; 
}

類似函式

sass通過關鍵字 @mixin定義類似函式 格式：@mixin 函式名(){ }
通過@include 引入函式

封裝函式可以寫在一個單獨的sass檔案裡，方便管理

//相容ie opacity封裝
@mixin opacity($opacity){
    opacity: $opacity;
    filter: alpha(opacity=$opacity * 100);
}
//使用
.demo{
    @include opacity(1);
}


----------
//編譯結果
.demo {
  opacity: 1;
  filter: alpha(opacity=100); 
}

引入封裝函式

比如：專案中有基礎檔案
_mixin.scss
_header.scss
_footer.scss

檔案index.scss正好也需要引入這三個基礎檔案

@import "mixin";
@import "header";
@import "footer";

引入基礎的scss，不需要下劃線和字尾名

相關文章