sass语法

1. sass的编译：

   • 命令编译：sass<要编译的sass文件路径>:<要输出的css文件路径>
   • 文件监听：sass –watch <要编译的sass文件路径>:<要输出的css文件路径>
   • 不同样式风格的输出方法：sass –watch <要编译的sass文件路径>:<要输出的css文件路径> –style compact
     嵌套输出方式:nested
     展开输出方式:expanded
     紧凑输出方式:compact
     压缩输出方式:compressed
     
   • GUI工具编译（Easy Sass）
   • 自动化编译 webpack

2. $变量

   • 普通变量 $color:#f00;
   • 默认变量 $color:#f00 !default;
   • 特殊变量 #{$variables}形式使用（应用于选择器和属性或复杂的属性值）
     
     
3. 嵌套

a{
    img{
        width:200px;
    }
    :hover{
        color:yellow;
    }
    &:hover{
        color:yellow;
    }
}

则css为

div a img{
    width:200px;
}
//生成a的子元素
div a :hover{
    color:yellow;
}
//加&生成伪元素
div a:hover{
    color:yellow;
}

1. 混合宏
   
   • @mixin aa(){}

//sass
@mixin aa($color){
    border:2px solid $color;
}//将好多出的东西封装起来
.aa{
    include aa(#000);//调用
    width：200px;
}

//css
.aa{
    border:2px solid black;
    width：200px
}

1. 继承

.cc{
    color:yellow;
}
.bb{
    @extend .cc
}

1. 占位符

//ee不会编译出来只是用来占位
%ee{
    width:200px;
}
.ff{
    @extend %ee;
}

1. @import引入模块

@import 'test';

1. 自定义封装函数

@function add($x,$y){
    return $x+$y;
}
.bb{
    width:add(5px,6px);
}

1. 控制命令

• @if
• for循环
  @for ifrom1to5不包括5@for i f r o m 1 t o 5 不 包 括 5 @ f o r i from 1 through 5{}    包括5
  
• @while
• each in循环列表
  @each itemin i t e m i n icons