sass mixins with loops givies error

Question

Я пишу код sass, чтобы получить вывод css, как показано ниже.

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

дерзость Mixin код я написал для этого:

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

Но я получаю сообщение об ошибке. Может кто-нибудь сказать почему?

Answer 1

Параметр $name кажется ненужным, поэтому я опустил его из первого примера. Второй пример показывает альтернативное решение с использованием $name, так что он правильно компилирует скобки.

@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%); 
}