sass mixins mit loops givies fehler

Question

ich schreibe einen sass code zu erhalten css ausgabe wie unten angegeben.

background: -webkit-linear-gradient(top, 50%); 
background: -moz-linear-gradient(top, 50%); 
background: linear-gradient(top, 50%); 

Der sass mixin Code i für diese geschrieben ist:

@mixin linear-gradient($name, $arg1, $arg2){ 
    @each $vendor in ('-webkit-', '-moz-','') { 
     background: #{$vendor}#{$name}(#{$arg1}, #{$arg2}); 
    } 
} 
@include linear-gradient(linear-gradient, top, 50%); 

aber ich war Fehler. Kann jemand sagen warum?

Answer 1

Der $name Parameter scheint unnötig, also habe ich es aus meinem ersten Beispiel weggelassen. Das zweite Beispiel zeigt eine alternative Lösung, die $name verwendet, so dass es die Klammern ordnungsgemäß kompiliert.

@mixin linear-gradient($arg1, $arg2){ 
    @each $vendor in ('-webkit-', '-moz-','') { 
     background: #{$vendor}linear-gradient(#{$arg1}, #{$arg2}); 
    } 
} 

@mixin linear-gradient($name, $arg1, $arg2){ 
    @each $vendor in ('-webkit-', '-moz-','') { 
     background: #{$vendor}$name+'('+$arg1+', '+$arg2+')'; 
    } 
} 

#myElement { 
    @include linear-gradient(top, 50%); 
} 

/* Output */ 

#myElement { 
    background: -webkit-linear-gradient(top, 50%); 
    background: -moz-linear-gradient(top, 50%); 
    background: linear-gradient(top, 50%); 
}