0

私は比較的LESSに慣れていません。これは印象的で、これまでの作業をとても楽しんでいますが、知りたいのは、ミックスイン関数によって生成された結果を使用して、それらを文字列と連結できるかどうかです。キーフレーム アニメーションを生成する関数を含む、多数の Mixin 関数を提供する LESShat の例を含めます。キーフレーム関数にプロパティを含む文字列を渡す必要があるという問題があり、CSS プロパティの代わりに LESShat ライブラリの他の mixin を使用して、そのようなキーフレーム アニメーションを生成したいと考えています。

元の .less ファイル:

@import "css/lesshat.less";
.keyframes(~'myskew, from {.skew(0)} to {.skew(90)}');
.myskewclass {
  .animation(myskew 3s linear alternate)
}

結果の .css ファイル:

lesshat-selector{-lh-property:0}
@-webkit-keyframes myskew{from{.skew(0)}to{.skew(90)}}
@-moz-keyframes myskew{from{.skew(0)}to{.skew(90)}}
@-o-keyframes myskew{from{.skew(0)}to{.skew(90)}}
@keyframes myskew{from{.skew(0)}to{.skew(90)}}
.myskewclass{
-webkit-animation:myskew 3s linear alternate;
-moz-animation:myskew 3s linear alternate;
-o-animation:myskew 3s linear alternate;
animation:myskew 3s linear alternate
}

キーフレーム アニメーションにはまだスキュー関数が含まれており、スキュー関数によって返される値は含まれていないため、意図したものとは明らかに異なります。問題は、文字列内の LESShat から他の mixin を渡そうとしていることだと思います。では、LESS で文字列と mixin 関数を連結する方法はありますか? 心に留めておいてください、私は完全に NEWB から LESS です。クロスブラウザー変換を独自に作成する必要はありません。LESS を使用してすべて自動化できれば、すばらしいと思います。私は明らかにそれを間違っています。

次のリンクでは、LESShat の .keyframes および .skew 関数について説明していますが、言及されている 2 つの混合については何もわかりません。多分私はどういうわけかその部分を見逃しました。 https://github.com/madebysource/lesshat/blob/master/README.md

4

1 に答える 1

0

私が理解している限り、あなたが言及したドキュメントによると、skew()ミックスインを内部で使用したり、ミックスインと一緒に使用したりしないでください。keyframes

.keyframes(~'animationName, 0%{ transform: skewX(0); } 100%{ transform: skewX(90deg) }');

上記は、次の CSS コードを出力します。

lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes animationName{ 0%{ -webkit-transform: skewX(0); } 100%{ -webkit-transform: skewX(90deg) }}
@-moz-keyframes animationName{ 0%{ -moz-transform: skewX(0); } 100%{ -moz-transform: skewX(90deg) }}
@-o-keyframes animationName{ 0%{ -o-transform: skewX(0); } 100%{ -o-transform: skewX(90deg) }}
@keyframes animationName{ 0%{-webkit-transform: skewX(0);-moz-transform: skewX(0);-ms-transform: skewX(0);transform: skewX(0); } 100%{-webkit-transform: skewX(90deg);-moz-transform: skewX(90deg);-ms-transform: skewX(90deg);transform: skewX(90deg);};
}

ほとんどの場合、Lesshat などの mixin ライブラリの代わりに autoprefixer を使用することをお勧めします。

実行する必要があります：

npm install less
npm install less-plugin-autoprefix
less input.less --autoprefix

autoprefix プラグインを使用する場合:

@keyframes myskew {
  0% {
    transform: skewX(0);
  }
  100% {
    transform: skewX(90deg);
  }
}

次のようにコンパイルします。

@-webkit-keyframes myskew {
  0% {
    -webkit-transform: skewX(0);
            transform: skewX(0);
  }
  100% {
    -webkit-transform: skewX(90deg);
            transform: skewX(90deg);
  }
}
@keyframes myskew {
  0% {
    -webkit-transform: skewX(0);
            transform: skewX(0);
  }
  100% {
    -webkit-transform: skewX(90deg);
            transform: skewX(90deg);
  }
}
于 2015-02-12T19:26:30.157 に答える