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，不需要下划线和后缀名