css - 将 css 类转换为 mixin

Question

下面是我的CSS代码。

div {
 &:before {
    position: absolute;
    width: 48%;
    height: 10px;
    content: ' ';
    left: 20px;
    bottom: 40px;
    @include vendor(transform, top);
    @include vendor(transform, skew(-5deg) rotate(-3deg));
    @include vendor(box-shadow, 0 30px 4px 10px red);
    z-index: -1;
  }
}

下面是我的mixin。

@mixin prefix($property, $value) {
  -webkit-#{$property}: $value;
  -moz-#{$property}: $value;
  -ms-#{$property}: $value;
  -o-#{$property}: $value;
  #{$property}: $value;
}

是否可以将整个 before block 代码转换为通用的 mixin，如 add-effect。

Answer 1

@mixin add-effect {
 &:before {
    position: absolute;
    width: 48%;
    height: 10px;
    content: ' ';
    left: 20px;
    bottom: 40px;
    @include vendor(transform, top);
    @include vendor(transform, skew(-5deg) rotate(-3deg));
    @include vendor(box-shadow, 0 30px 4px 10px red);
    z-index: -1;
  }
}