Scss中的mixin

什么是mixin

mixin是scss中的一种复用代码的方式，通过mixin可以将一组css属性封装起来，然后在其他地方通过@include来引用。

如何使用mixin

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
}

在上面的例子中，我们定义了一个mixin，名为border-radius，它接受一个参数$radius，然后使用-webkit-border-radius和border-radius来设置圆角。

在其他的css文件中，我们可以通过@include来引用这个mixin，如下所示：

@import 'mixin.scss';

.box {
  @include border-radius(10px);
}

在上面的例子中，我们通过@import引入了mixin.scss文件，然后在.box类中使用了border-radius这个mixin。

分享

以下的代码是我工作中经常用到的，可以参考一下

/** flex 布局 */
@mixin flex-layout($direction: null, $justify-content: null, $align-items: null) {
  display: flex;

  @if $direction {
    flex-direction: $direction;
  }

  @if $justify-content {
    justify-content: $justify-content;
  }

  @if $align-items {
    align-items: $align-items;
  }
}

/** 使用flex方式实现水平垂直居中 */
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/** 使用绝对定位的方式实现水平垂直居中 */
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/** 文本超出显示省略号, 支持多行文本 */
@mixin text-ellipsis($line-clamp: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line-clamp;
}

@mixin size($width: 100%, $height: 100%) {
  width: $width;
  height: $height;
}

/** 定义一个圆形 */
@mixin circle($size) {
  width: $size;
  height: $size;
  border-radius: 50%;
}

@mixin font($size: 14px, $color: null, $weight: null) {
  font-size: $size;

  @if $color {
    color: $color;
  }

  @if $weight {
    font-weight: $weight;
  }
}