我正在尝试使用变量作为名称来调用mixin,如下所示:
@include $mixin-name;
我看到有一些人在网上提到想要这样做。这张票(http://dev.vaadin.com/ticket/9546)表示“已修复”,我认为这意味着在Sass 3.2中有可能,但Google网上论坛上Sass小组的评论似乎另有说明:http://goo.gl/HtdHu
我看到他们在说什么,似乎很多人在询问它可以很容易地以另一种方式解决他们的问题。
我想不出我的问题的另一种方式,所以让我解释一下,也许有人可能会有一两个想法?
我为@keyframes
创建了一个mixin,以便我可以调用@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;
}
}
哪个好极了!但是如果我在其中一个关键帧状态中使用Compass 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;
}
}
等...
所以,我知道这很迂腐,但是我宣布-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;
}
}
等...
所以,我使用@include experimental-value
创建了一个mixin,但我不能自动化它,因为
@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
我现在已经花了几个小时,我会继续捣蛋......但如果有人有类似的经历或问题,我很想知道......
谢谢!