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

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;
  }
}
本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: sass