Question

使用Stylus CSS预处理器，我正在尝试编写一个mixin，它将处理transition属性和其transform值的供应商前缀能够接受多个值。

以下是我正在寻找的输出示例：

-webkit-transition:  opacity .2s linear .2s, -webkit-transform .2s linear .2s, left 0s linear .45s;
-moz-transition:     opacity .2s linear .2s, -moz-transform    .2s linear .2s, left 0s linear .45s;
-ms-transition:      opacity .2s linear .2s, -ms-transform     .2s linear .2s, left 0s linear .45s;
-o-transition:       opacity .2s linear .2s, -o-transform      .2s linear .2s, left 0s linear .45s;
transition:          opacity .2s linear .2s, transform         .2s linear .2s, left 0s linear .45s;

请注意transition和transform上的供应商前缀。

Answer 1

虽然你可以在这样的手写笔中实现这一点：

transition()
  fix_transform($values, $vendor)
    $new_values = ()
    if match(',', '%s' % $values)
      for $val in $values
        if length($new_values) > 0
          $new_values = $new_values, fix_transform($val, $vendor)
        else
          $new_values = fix_transform($val, $vendor)
    else
      for $val in $values
        $new_val = $val
        if $val == transform
          $new_val = unquote($vendor + $new_val)
        push($new_values, $new_val)

    return $new_values

  for $vendor in ('-webkit-' '-moz-' '-ms-' '-o-' '')
    {$vendor}transiton: fix_transform(arguments, $vendor)

我建议您不要使用Stylus本身添加前缀，而是使用autoprefixer这样的专用工具。

实际上有Stylus autoprefixer plugin - 最适合与Stylus一起使用。

针对Stylus中的属性和值的供应商前缀

1 个答案: