Home › Forums › CSS › Why won't this @mixin work? › Reply To: Why won't this @mixin work?
May 26, 2014 at 10:53 pm
#171112
__
Participant
You need to use interpolation when you use variables as (or in) property names:
@mixin vendors($prop, $value) {
$webkit: -webkit-#{$prop};
$moz: -moz-#{$prop};
$ms: -ms-#{$prop};
$o: -o-#{$prop};
@if $prop == border-radius or box-shadow or text-shadow or border-image{
#{$prop}: $value;
}
@else if $prop == transition or animation{
#{$webkit}: $vlaue;
#{$prop}: $value;
}
@else if $prop == transform{
#{$webkit}: $value;
#{$ms}: $value;
#{$prop}: $value;
}
@else{
#{$prop}: $value;
}
}
Tested with:
#id{
@include vendors( border-radius, 1em )
}
Results in:
#id {
border-radius: 1em; }
I don’t know why it was “doing nothing” originally. I would have expected an error (at least, an error message would have been helpful).