sass之@mixin

一开始写 sass 以为跟普通 css 没多大区别，基本在里面写的逻辑和规则都差不多，偶尔用下变量，嵌套，import，计算等功能，之所以会这样是还没发现sass的强大功能啊，例如 mixin，extend，function 等等

mixin介绍

mixin 是混合的意思，可以定义一些通用的或者兼容浏览器的样式，比如我们在写css考虑浏览器兼容问题需要些很多前缀 -webkit-，-o-，-moz-，-ms-，每次都要重复写这些样式是很耗时间的，@mixin 可以定义一些可复用的 css 代码，加快开发速度

mixin定义

无参数mixin

@mixin large-text {
  font: {
    family: "Arial";
    size: 30px;
    weight: bold;
  }
  color: brown;
}

带参数mixin

@mixin sexy-border($color: #333, $width: 2px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

参数mixin特点：

• 可以指定默认值
• 可变参数
• 可以指定参数 @include sexy-border($width: 4px);
• 可以嵌套
• 参数有作用域之分

使用方法

.header {
  @include large-text
}
.sub-menu {
  @include sexy-border($width: 30px)
}

@content

有时候还看到@mixin里面还有一个 @content，比如

@mixin title {
  @content;
}

这个@content是调用mixin的时候定义的样式

.article-title {
  @include title {
    font: {
      size: 24px;
      font-weight: 600;
      color: #333;
    }
  }
}

最后输出的css样式

.article-title {
  font-size: 24px;
  font-font-weight: 600;
  font-color: #333;
}

个人感觉这个使用在声明一些@keyframe等较长的样式定义，兼容浏览器的声明里面

mixin高级使用

比如声明一个flex容器，css兼容写法如下

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
}

用@mixin来声明

%flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin display-flex() {
  @extend %flex-container;
}

使用方法

.flex-container {
  @include display-flex
}

再来定义一个动画

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

这里用到@content来把定义的帧动画样式输出

使用方法

@include keyframes(left-to-right) {
  0% {
      top: 0;
  }
  100% {
      top: 300px;
  }
}