Включая миксины, использующие переменные для 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
я потратил на это несколько часов, и я продолжу играть на скрипке... Но если у кого-то есть подобный опыт или проблемы, я бы хотел знать...
спасибо!