sass 学习(一)混合指令@mixin

使用的场景:

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

定义:

@mixin 名称(参数,..){内容块;}

案例一:(无参数)

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

sass 学习(一)混合指令@mixin_第1张图片

@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;
}

 

你可能感兴趣的:(sass 学习(一)混合指令@mixin)