CODEWITHSUNDEEP
sass
Alexey
Alexey

Reputation: 642

SASS keyframes not compiling as wanted

I am using the following keyframes mixin for SCSS

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-ms-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}

it works perfectly, when i have to animate, which has the animation property, but when i try to use it for child elements i get not the output, that i need (but syntax-valid)

Example:

@include keyframes('text') {
    0% {
        span { color: red; }
    }
    100% {
        span { color: green; }
    }
}

Will output (short ouput):

@keyframes text {
    0% span { color: red; }
    100% span { color: green; }
}

But what i need is:

@keyframes text {
     0% {
        span { color: red; }
    }
     100% {
        span { color: green; }
    }
}

How can i prevent sass from snapping the first brackets?

Upvotes: 1

Views: 1984

Answers (1)

fsw
fsw

Reputation: 3695

As far as i am concerned you apply keyframes to an element. so your desired output:

@keyframes text {
     0% {
        span { color: red; }
    }
     100% {
        span { color: green; }
    }
}

does not make much sense in CSS.

I think what you need is something like :

@keyframes span#text {
    0% {color: red; }
    100% { color: green; }
}

also it is not your mixin problem as this SASS:

0% {
    span { color: red; }
}
100% {
    span { color: green; }
}

compiles to:

0%  span {
  color: red; }

100%  span {
  color: green; }

as desired.

I think the intended usege of your keyframes mixin would be something like:

span#text {

    @include keyframes(text) {
      0% {
        color: red;
      }
      100% {
        color: green;
      } 
    }

}

Upvotes: 2

Related Questions