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

sass工具类