말대꾸 키 프레임 애니메이션 믹스 인 생성 무효 CSS

Question

I 다음 키 프레임 믹스 인,하지만 잘못된 CSS 생성 될 것 같다

@-webkit-keyframes $animationName { 
    0% { 
    opacity: 1; 
    } 
    33% { 
    opacity: 0; 
    } 
    66% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
} 
@-moz-keyframes $animationName { 
    0% { 
    opacity: 1; 
    } 
    33% { 
    opacity: 0; 
    } 
    66% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
} 
@-o-keyframes $animationName { 
    0% { 
    opacity: 1; 
    } 
    33% { 
    opacity: 0; 
    } 
    66% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
} 
@keyframes $animationName { 
    0% { 
    opacity: 1; 
    } 
    33% { 
    opacity: 0; 
    } 
    66% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

대신의 키 프레임 이름을 갖는 여기

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

@include keyframes(icon-one) { 
     0% { 
      opacity: 1; 
     } 
     33% { 
      opacity: 0; 
     } 
     66% { 
      opacity: 0; 
     } 
     100% { 
      opacity: 0; 
     } 
} 

출력의 icon-one의 경우 $animationName입니다.

Answer 1

키 프레임 이름의 변수에 문자열 보간법을 사용해야합니다. 요구를 믹스 인 귀하의 키 프레임은 다음과 같이 기록 될 :

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

참고 keyframes mixin that comes with Compass does this 그.

interpolation was not required in certain versions of Sass (possibly limited to 3.3.x)을 나타내는 GitHub에 문제가 있습니다. 그러나 Sass의 저자는 이것을 버그라고 생각했습니다.

이전 동작은 버그입니다. 변수는 어떤 지시어에서도 해석되지 않아야합니다. 접두사 위와 동일

Answer 2

:

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

전체 세부 사항 here.

대신 Autoprefixer을 사용하십시오.