Включая миксины, использующие переменные для name в Sass

я пытаюсь вызвать mixin, используя переменную в качестве имени, например:

@include $mixin-name;

это не кажется таким уж трудным...

я видел, как несколько человек в интернете упоминают, что хотят это сделать. Этот билет (http://dev.vaadin.com/ticket/9546) говорит "исправлено", что, как я предполагал, означало, что в Sass 3.2 это было возможно, но этот комментарий от группы Sass в группах Google, похоже, предполагает иное: http://goo.gl/HtdHu

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

я не могу придумать другой способ для моей проблемы, поэтому позвольте мне объяснить, и, возможно, у кого-то может быть идея или две?

CSS анимации

я создал миксин для @keyframes чтобы я мог позвонить @include animation(); и получить полный список префиксов и официальных @keyframes

@include keyframes(reveal) {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

дает мне:

@-webkit-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-ms-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

это здорово! Но если я использую компас transform в одном из государств-кадр:

@include keyframes(round) {
    from {
        @include transform(rotateZ(-145deg));
        opacity: 1;
    }
    to {
        @include transform(rotateZ(-45deg));
        opacity: 0.5;
    }
}

затем я получаю что-то вроде:

@-webkit-keyframes round {
    from {
        -webkit-transform: rotateZ(-145deg);
        -moz-transform: rotateZ(-145deg);
        -ms-transform: rotateZ(-145deg);
        -o-transform: rotateZ(-145deg);
        transform: rotateZ(-145deg);
        opacity: 1;
    }
    to {
        -webkit-transform: rotateZ(-45deg);
        -moz-transform: rotateZ(-45deg);
        -ms-transform: rotateZ(-45deg);
        -o-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
        opacity: 0.5;
    }
}

etc...

префиксы префиксы внутри

Итак, я знаю, что это педантично, но меня действительно раздражает, что я заявляю -webkit-animation, но тогда внутри я должен объявить все префиксы, когда то, что я хочу сделать, это только объявите тот же префикс, что и ключевые кадры и официальный, например:

@-webkit-keyframes round {
    from {
        -webkit-transform: rotateZ(-145deg);
        transform: rotateZ(-145deg);
        opacity: 1;
    }
    to {
        -webkit-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
        opacity: 0.5;
    }
}

@-moz-keyframes round {
    from {
        -moz-transform: rotateZ(-145deg);
        transform: rotateZ(-145deg);
        opacity: 1;
    }
    to {
        -moz-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
        opacity: 0.5;
    }
}

etc...

проблемы Mixin

Итак, я создал миксин, используя @include experimental-value, но я не могу автоматизировать его достаточно, потому что

@function browser-is-prefix($browser, $prefix) {
    @if $browser == $prefix {
        @return true;
    } @else {
        @return false;
    }
}

@mixin transform-prefix($transform, $browser) {
    @include experimental-value(transform, $transform,
        browser-is-prefix($browser, -moz),
        browser-is-prefix($browser, -webkit),
        browser-is-prefix($browser, -o),
        browser-is-prefix($browser, -ms),
        false, true);
}

@mixin animation-name($browser) {
    from {
        @include transform-prefix(transform(translate(-25px,200px) scale(0.5)), $browser);
        opacity: 0;
    }
    to {
        @include transform-prefix(transform(translate(0,0) scale(0.5)), $browser);
        opacity: 1;
    }
}

вызов @include animation-name(-webkit) будет работать отлично и даст нам:

@-webkit-keyframes animation-name {
    from {
        -webkit-transform: translate(-25px,200px) scale(0.5);
        transform: translate(-25px,200px) scale(0.5);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0,0) scale(0.5);
        transform: translate(0,0) scale(0.5);
        opacity: 1;
    }
}

но я не могу автоматизировать это!

для автоматизации процесса я хотел бы иметь возможность вызвать mixin, что-то вроде @include prekeyframes(animation-name); и prekeyframes сделать точно что за keyframes mixin делает выше, за исключением вместо слепо включения @content из, он будет включать mixin и использовать только префиксы, которые он должен основываться на том, какой префикс имеет @keyframes:

@mixin prekeyframes($name) {
    $prefixes : -webkit-, -moz-, -o-, -ms-, '';
    @each $prefix in $prefixes {
        @include $name($prefix);
    }
}

это, конечно, вызывает ошибку. Если я интерполирую $name (@include #{$name}($prefix)), это еще вопрос.

Итак, я мог бы просто жить с дополнительными transform значения, или я мог бы сделать все это вручную, но я всегда был очень впечатлен гибкостью Sass и мне это кажется очень ограниченным...

В итоге:

• я хочу определить анимацию один раз, в одном месте.
• я хочу иметь возможность @include transform в этой анимации.
• я хочу, чтобы правильно префиксом transform внутри правильно с префиксом @keyframes

я потратил на это несколько часов, и я продолжу играть на скрипке... Но если у кого-то есть подобный опыт или проблемы, я бы хотел знать...

спасибо!