SASS知識點

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，不須要下劃線和後綴名