Префиксы браузера как переменные через @each sass

У нас запланировано много анимации, и я ищу более чистый способ для всех браузеров. Что-то дерзкое вроде этого было бы здорово:

@each $browser in '-webkit-', '-moz-', '-o-', '-ms-' {
  @#{$browser}keyframes rotate {
    from { #{$browser}transform: rotate(0deg);}
    to { #{$browser}transform: rotate(360deg);}
  }
}

За исключением того, что @#{$vendor}keyfr... выдает ошибку, ожидающую число или функцию после @. Есть ли способ заставить @ пройти через css?

В противном случае, кто-нибудь придумал более чистый способ сделать это с помощью @each, @mixin или чего-либо еще, что избавило бы от перечисления каждой анимации для каждого браузера (т.е. ниже)?

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg);}
  to { -webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
  from { -moz-transform: rotate(0deg);}
  to { -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate {
  from { -o-transform: rotate(0deg);}
  to { -o-transform: rotate(360deg);}
}

@-ms-keyframes rotate {
  from { -ms-transform: rotate(0deg);}
  to { -ms-transform: rotate(360deg);}
}

css sass css-animations cross-browser vendor-prefix
person cormiston    schedule 16.11.2013    source источник
comment
Если вы используете Compass: stackoverflow.com/a/17621055/557612 Лично я предпочитаю использовать autoprefixer на этапе постобработки.   -  person steveax    schedule 17.11.2013

Ответы (2)


arrow_upward
6
arrow_downward

Вы можете сделать это с помощью миксина, где вы предварительно определяете ключевые кадры поставщиков вместо того, чтобы динамически генерировать поставщиков в цикле. Может что-то в этом духе:

@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;

@include keyframes('rotate') {
    from { #{$browser}transform: rotate(0deg);}
    to { #{$browser}transform: rotate(360deg);}
}

ДЕМО

person Martin Turjak    schedule 17.11.2013
comment
Отличное решение! Чтобы соответствовать новому синтаксису 3.4, нам нужно добавить !global к локальным версиям $browser внутри миксина: sassmeister.com /gist/7ed6237f0e7f0aa89935 К сожалению, не работает в SASS до версии 3.3 (но работает в libsass 2.0!) - person bonflash; 07.10.2014

arrow_upward
0
arrow_downward

Просто чтобы моды продолжали работать...

http://sassmeister.com/gist/554597ba07c49dbd92ce

@include makeKeyframes('badgeGlow') {
  from { @include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
  50% { @include box-shadow(0px 0px 16px rgba($glowToColor, 0.8), 0px 1px 2px rgba(0, 0, 0, .80));color:white;border-color: lighten($glowBaseColor, 20);}
  to { @include box-shadow(0px 0px 10px rgba($glowToColor, 0.3), 0px 1px 2px rgba(0, 0, 0, .80));color:$glowBaseColor;border-color: $glowBaseColor;}
}

button.glow {
  @include setKeyframeType('badgeGlow',1.5s,infinite);
}

Обратите внимание, что вы вызываете генератор ключевых кадров один раз, и вы можете ссылаться на ключевые кадры из любого другого места в ваших классах с помощью миксина setKeyframeType и предоставлять некоторые основные параметры. Отлично, когда у вас есть много элементов, которые могут иметь один и тот же тип переходов.

person beauXjames    schedule 16.05.2014