次のように、変数を名前として使用して mixin を呼び出そうとしています。
@include $mixin-name;
そんなに難しくないような…
オンラインでこれをやりたいと言っている人を何人か見ました。このチケット ( http://dev.vaadin.com/ticket/9546 ) には「修正済み」と書かれており、これは Sass 3.2 では可能だったと推測しましたが、Google グループの Sass グループからのこのコメントは別のことを示唆しているようです: 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しかし、キーフレームの状態の 1 つでコンパスを使用すると、次のようになります。
@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十分に自動化できません。
@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;
}
}
しかし、私はそれを自動化することはできません!
@include prekeyframes(animation-name);プロセスを自動化するために、ミックスインを呼び出すことができるようにしたかったのですが、やみくもに の を含めるのではなく、ミックスインを含め、prekeyframes何に基づいて必要なプレフィックスのみを使用します@keyframes の接頭辞:keyframes@content
@mixin prekeyframes($name) {
$prefixes : -webkit-, -moz-, -o-, -ms-, '';
@each $prefix in $prefixes {
@include $name($prefix);
}
}
もちろん、これはエラーをスローします。$name( )を補間@include #{$name}($prefix)しても、それはまだ問題です。
したがって、余分なtransform値をそのまま使用することも、すべて手動で行うこともできますが、Sass の柔軟性には常に感銘を受けており、これは私にとって本当に限界に思えます...
要約すると：
- アニメーションを 1 か所で 1 回定義したいと考えています。
@include transformそのアニメーションの中でできるようになりたいです。transform正しい接頭辞の中に正しい接頭辞を付けたい@keyframes
私はこれに数時間を費やしましたが、いじり続けます...しかし、誰かが同様の経験や問題を抱えているなら、私は知りたいです...
ありがとう！