Append a string to @content for each line in SASS

[SlegaitisT]

Hi guys,

I’ve looked online but couldnt really find an answer. My question is can you append a string of lets say browser prefix such -webkit- to each line of @content.

for example in a mixin:

@mixin prefixKeyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
      '-webkit-' #{@content};
    }
    @-moz-keyframes #{$animationName} {
        '-moz-' #{@content};
    }
    @-o-keyframes #{$animationName} {
        '-o-' #{@content};
    }
    @keyframes #{$animationName} {
        @content
    }
};

Basically what I want to do is to create a mixin for keyframe animations.

I got this from the somebody but for some reason it fails to add the prefixes after the code has been rendered.

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$animationName} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$animationName} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$animationName} {
        $browser: ''; @content;
    }
} $browser: null;

There is no error in above mixin but it does not add prefixes.