LESS 1.7.0+ 用に更新 ( WAY Simpler )
1.7.0 の更新と、ルールセットを作成する機能、および設定で変数@keyframesを使用する機能により、これをはるかに直接的に行うことができるようになりました。
これで、ルールセットによってパラメーターを介してミックスインを実際に渡すことができるようになりました。または、プロパティ文字列自体を渡すことができます。したがって、これを考慮してください：
LESS (1.7 を使用)
.keyframes(@name, @from, @to) {
@frames: {
from { @from(); }
to { @to(); }
};
@pre: -moz-keyframes;
@-moz-keyframes @name
{
@frames();
}
@-webkit-keyframes @name
{
@frames();
}
@keyframes @name
{
@frames();
}
}
.keyframes(testName, {color: red; .myMix(0);}, {color: blue; .myMix(1);});
.myMix(@value) {opacity: @value;}
プロパティ設定と mixin 呼び出しの両方を渡していることに注意してください。私の出力は次のとおりです。
CSS出力
@-moz-keyframes testName {
from {
color: red;
opacity: 0;
}
to {
color: blue;
opacity: 1;
}
}
@-webkit-keyframes testName {
from {
color: red;
opacity: 0;
}
to {
color: blue;
opacity: 1;
}
}
@keyframes testName {
from {
color: red;
opacity: 0;
}
to {
color: blue;
opacity: 1;
}
}
ルールセットが括弧内に渡され{...}、 and を介して呼び出される@from()方法に注意してください@to()(mixin 呼び出しによく似ています)。これらの渡されたルール セットを使用して別のルール セットを設定し、そのルール セット@frames自体を呼び出してキーフレームの定義を埋めます。
より一般的に
ここでは、プライベート mixin を別の mixin に渡し、その別の mixin から呼び出します。
以下
.someMixin(@class; @expectedMixin) {
.@{class} {
@expectedMixin();
.myPrivateMix(0.6);
test: 1;
}
}
.someMixin(newClass; {.myClass;});
.myClass {
.myPrivateMix(@value) {opacity: @value;}
}
CSS出力
.newClass {
opacity: 0.6;
test: 1;
}
レガシー情報のために以下を保持します。
更新 (LESS 1.4.0+ サポートを追加)
うわー、これには少し手間がかかりましたが、あなたが使えるものがあると思います。ただし、具体的にはパターン マッチングを使用して、モジュール内のミックスインを特別に定義する必要があります。そう...
まず、モジュールのミックスインを定義します
特定の将来の mixin で使用される予定のモジュール mixin が、同じ mixin nameで定義されているが、異なるパターン名で定義されていることに注意してください。これは、この作業を行うための鍵でした。
// define one animation in a module
.from(my-from){ color: red; }
.to(my-to) { color: blue; }
// define one animation in another module
.from(another-from){ font-size: 1em; }
.to(another-to) { font-size: 2em; }
モジュールに個々の mixin 名も必要な場合は、次のようにすることができます。
// define one animation in a module
.my-from(){ color: red; }
.my-to() { color: blue; }
.from(my-from){ .my-from() }
.to(my-to) { .my-to() }
// define one animation in another module
.another-from(){ font-size: 1em; }
.another-to() { font-size: 2em; }
.from(another-from){ .another-from() }
.to(another-to) { .another-to() }
これにより、ストレート mixin を呼び出すか、またはパターン マッチングを通じて.my-from()特異な mixin グループにアクセスする後の mixin 内で可変的にアクセスできるようにする必要があります。.from()
次に、Mixin を定義します
あなたの@keyframes例では、それは非常に困難でした。実際、スタック オーバーフローの回答は、定義@nameに従っているために通常の LESS ルールでは適用されなかったの適用に関する問題を解決するのに不可欠でした。@keyframes適用するソリューション@nameは厄介に見えますが、機能します。残念なことに、アニメーションを再生するためのセレクター文字列も定義する必要があります (その文字列を使用して最後}のキーフレームを構築するため)。@この名前付けの制限は、 like@keyframesおよびpossible で始まる css 文字列にのみ当てはまります@media。
さらに、モジュール ファイルで使用される標準の mixin 名があるため、新しい mixin 内で一貫してアクセスでき、同時に変数を渡して、パターン マッチを通じてその mixinの適切なバリエーションを選択できます。したがって、次のようになります。
LESS 1.3.3 以下
// define mixin in mixin file
.keyframes(@selector, @name, @from, @to) {
@newline: `"\n"`; // Newline
.setVendor(@pre, @post, @vendor) {
(~"@{pre}@@{vendor}keyframes @{name} {@{newline}from") {
.from(@from);
}
to {
.to(@to);
}
.Local(){}
.Local() when (@post=1) {
(~"}@{newline}@{selector}") {
-moz-animation: @name;
-webkit-animation: @name;
-o-animation: @name;
-ms-animation: @name;
animation: @name;
}
}
.Local;
}
.setVendor("" , 0, "-moz-");
.setVendor(~"}@{newline}", 0, "-webkit-");
.setVendor(~"}@{newline}", 0, "-o-");
.setVendor(~"}@{newline}", 0, "-ms-");
.setVendor(~"}@{newline}", 1, "");
}
未満 1.4.0+
.keyframes(@selector, @name, @from, @to) {
@newline: `"\n"`; // Newline
.setVendor(@pre, @post, @vendor) {
@frames: ~"@{pre}@@{vendor}keyframes @{name} {@{newline}from";
@{frames} {
.from(@from);
}
to {
.to(@to);
}
.Local(){}
.Local() when (@post=1) {
@animationSector: ~"}@{newline}@{selector}";
@{animationSector} {
-moz-animation: @name;
-webkit-animation: @name;
-o-animation: @name;
-ms-animation: @name;
animation: @name;
}
}
.Local;
}
.setVendor("" , 0, "-moz-");
.setVendor(~"}@{newline}", 0, "-webkit-");
.setVendor(~"}@{newline}", 0, "-o-");
.setVendor(~"}@{newline}", 0, "-ms-");
.setVendor(~"}@{newline}", 1, "");
}
Mixin を呼び出す
独自の名前を付けて、モジュール mixin のパターン マッチにストレート パターン (すべてドット [.]も引用符もなし)を渡すことができますが、セレクター文字列 (. mixin を正しく動作させるには:
.keyframes('.changeColor', some-name, my-from, my-to);
.keyframes('.changeFontSize', another-name, another-from, another-to);
目的の出力が得られる
@-moz-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@-webkit-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@-o-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@-ms-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
.changeColor {
-moz-animation: some-name;
-webkit-animation: some-name;
-o-animation: some-name;
-ms-animation: some-name;
animation: some-name;
}
@-moz-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@-webkit-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@-o-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@-ms-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
.changeFontSize {
-moz-animation: another-name
-webkit-animation: another-name;
-o-animation: another-name;
-ms-animation: another-name;
animation: another-name;
}