The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Why won't this @mixin work? Reply To: Why won't this @mixin work?


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;

        #{$prop}: $value;

Tested with:

    @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).