供應商手寫筆

Question

，前綴兩個屬性和值使用手寫筆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) 

我建議你不要使用手寫筆本身添加前綴，而是利用專門的工具，如autoprefixer這一點。

實際上是一個Stylus autoprefixer plugin有 - 那將是最好用手寫筆來使用。