结合2个sass mixins @transition和@vendor没有错误

Question

我有两个我想要组合的混合，1个用于过渡，另一个用于处理供应商前缀，所以基本上我想转换元素的translateY值，所以想做类似以下的事情：

@include transition( @include vendor(transform, .3s ease-in-out) );

混入

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

@mixin transition($args...) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    transition: $args;
}

如果有人可以告诉我我是如何做到这一点的，或者是否有更好的方式可以做到这一点。如果有人建议，我不需要使用指南针。

Answer 1

使用Compass

指南针肯定是关于供应商前缀的方法。然后你需要做的就是：

@import "compass";

test {
  @include transition( transform 0.3s ease-in-out );
}

，输出结果如下：

test {
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

DEMO

---

自己的供应商混合和功能（无指南针）

如果由于某种原因您不使用指南针，您可以尝试使您的供应商混合更令人兴奋并添加一些功能（以检查参数是否需要加前缀）。也许是这些方面的东西：

// loops through all arguments and prefixes the ones that need it (in this case only transform)
@function vendor-args($arg, $vendor) {
    $result: ();
    @each $i in $arg {
      @if $i == transform { $result: append($result, #{$vendor}$i); }
      @else { $result: append($result, $i); }
    }
  @return $result;
}

// general vendor mixin 
@mixin vendor($property, $args...){
  @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
    $out: null;
    @each $arg in nth($args,1) {
      $out: ($out, vendor-args($arg, $vendor));
    }
    #{$vendor}#{$property}: $out;
  }
}

// general transition mixin
@mixin transition($args...) {
  @include vendor(transition, $args);
}

// test
test {
  @include transition( transform .3s ease-in-out, color .2s linear );
}

DEMO

或者，如果您要检查需要前缀而不仅仅是transform的属性列表，您可以添加另一个小函数：

@function needs-vendor($p){
  $l: transform, another-property-you-want-prefixed, and-another;
  @each $i in $l {
    @if $i == $p { @return terue; }
  }
  @return false;
}

然后使用needs-vendor($i)代替$i == transform。

另一件事是......你真的不需要在-ms-前加上转换。所以你可以让供应商mixin将一个前缀列表作为可选参数，并像这样使用它：

@mixin transition($args...) {
  @include vendor(transition, $args, ('-webkit-', '-moz-', '-o-', ''));
}

和voilá，在这里：

DEMO

但如果你选择Compass，它会为你做一切艰难的思考; - ）