CODEWITHSUNDEEP
csssassmixins
Matthew Layton
Matthew Layton

Reputation: 42270

SCSS mixin for vendor specific attributes

I'm writing a mixin to handle vendor specific attributes, however I want to be able to specify which vendors I want to support.

I have tried...

@mixin vendor($attribute, $value, $vendors: (moz, ms, webkit)) {
    @each $vendor in $vendors {
        #{-$vendor -$attribute}: $value;
    }
    #{$attribute}: $value;
}

Resuling CSS...

-moz-border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius: 12px;

I also tried...

@mixin vendor($attribute, $value, $vendors: (moz, ms, webkit)) {
    @each $vendor in $vendors {
        #{$vendor -$attribute}: $value;
    }
    #{$attribute}: $value;
}

Resulting CSS...

moz-border-radius: 12px;
ms-border-radius: 12px;
webkit-border-radius: 12px;

What am I doing wrong?

Upvotes: 0

Views: 154

Answers (1)

Alex M
Alex M

Reputation: 2836

I updated your second try:

@mixin vendor($attribute, $value, $vendors: (moz, ms, webkit)) {
    @each $vendor in $vendors {
        -#{$vendor -$attribute}: $value;
    }
    #{$attribute}: $value;
}

So I just added a - before #{$vendor -$attribute}.

Upvotes: 2

Related Questions