CODEWITHSUNDEEP
csssassmixins
upInCloud
upInCloud

Reputation: 1009

Use multiple arguments for SCSS mixin one after another

I'm trying to create a SCSS mixin for keyframes like this - 

@mixin useKeyframes($name, $duration, $direction) {
    -webkit-animation: $name $duration $direction;
    -moz-animation: $name $duration $direction;
    -ms-animation: $name $duration $direction;
}

and applying to a div like this : 

.divs-class-name {
    @include useKeyframes(myAnimationName, 1s, forwards) {
    }
}

to get the desired effect of:

.divs-class-name {
    -webkit-animation: myAnimationName 1s forwards;
    -moz-animation: myAnimationName 1s forwards;
    -ms-animation: myAnimationName 1s forwards;
}

but I get an error in compilation : 

Mixin "useKeyframes" does not accept a content block.

I think I'm concatenating the arguments in mixin the wrong way. Is there any other way I can do this?

Upvotes: 1

Views: 608

Answers (2)

Nicholas
Nicholas

Reputation: 3784

The error says that you have to have a @content inside your mixin, or just remove the curly braces when you try to @include your mixin and it should work.

More details here About @content in scss

Upvotes: 1

upInCloud
upInCloud

Reputation: 1009

The braces in the end where I @included the mixin were the problem. Replacing that with @include useKeyframes(myAnimationName, 1s, forwards); worked!

Following is the entire code:

@mixin useKeyframes($name, $duration, $direction) {
  -webkit-animation: $name $duration $direction;
  -moz-animation: $name $duration $direction;
  -ms-animation: $name $duration $direction;
}

.divs-class-name {
  @include useKeyframes(myAnimationName, 1s, forwards); 
}

Thanks @3rdthemagical for this!

Upvotes: 0

Related Questions