sass 学习（一）混合指令@mixin

使用的场景：

当样式表中有重复的样式时，定义在混合器中，避免使用无语义的类（class）或者简化样式表

定义：

@mixin 名称（参数，..）{内容块;}

案例一：（无参数）

在公共的文件中 如：style.mixin.scss

@mixin large-text {
   font:{
     family: Arial;
     size: 20px;
     weight:blod;
   }
   color: #f00;
}

引入混合器：在所应用的组件的样式中

.page-title {
  @include large-text;
  padding:4px;
  margin-top:10px;
}

编译后的文件xx.css 

.page-title {
   font-family: Aril;
   font-size:20px;
   font-weight:blod;
   color:#f00;
   padding:4px;
   margin-top:10px;
}

案例二：带参数

@mixin flex-layout($color,$width,$direction) {
  display:flex;
  align-items:center;
  flex-flow:$direction nowrap;
  border: {
    color:$color;
    widht:$widht;
    style:solid;
  }
  
}

// $direction 参数也可以添加上默认值 ，在引用时不传就是采用默认值
@mixin flex-layout($color,$width,$direction:row) {
  display:flex;
  align-items:center;
  flex-flow:$direction nowrap;
  border: {
    color:$color;
    widht:$widht;
    style:solid;
  }
  
}

引用：在组件的样式中

p {
  @include flex-layout(blue,2px)
}

编译后的：

p {
 display: flex;
 align-items: center;
 flex-flow: row nowrap;
 border-color:blue;
 border-widht:1px;
 border-style:solid;
}