Forums

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?

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