一开始写 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;
  }
}