LessCSSと@KeyFrames

Question

誰もがLessCSSに問題を抱えていましたか @keyframes また @-ms-keyframes？ CSSを正常にコンパイルします @-webkit-keyframes, @-moz-keyframes と @-o-keyframes.

Answer 1

これらはホワイトリストです、 -ms 不足している。 keyframes 動作するはずです： https://github.com/cloudhead/less.js/blob/master/lib/less/parser.js#l988

修正のオープンリクエストがあります： https://github.com/cloudhead/less.js/pull/498

一般的な回避策は、キーフレームを別のものにすることです .css インポートするファイル - .CSS拡張子を使用したファイルは、より少ないほど解析されません。

Answer 2

KeyFramesの生成は、より少ないほど非常に総合的であるように思われます。そのため、次のような異なるハッキングやツールが表示されています。

• https://github.com/kuus/animate-me.less1回の呼び出しでキーフレームとアニメーションの両方を生成する少し複雑なミックス。アニメーションELEMセレクターとキーフレームCSSコンテンツの両方を文字列として受け入れます。キーフレームの最大10ステップ
• https://github.com/thybzi/keyframesAnimate-Meやその他のソリューションに触発された私のツール。キーフレームのみを生成します。アニメーションを個別に適用する必要があります。これにより、単一の要素に複数のアニメーションを適用でき、複数の要素に同じキーフレームを適用できます。キーフレームを作成するために必要なアクションが増えましたが、真のCSS/より少ない方法を使用してスタイルを生成します（そのため、そこで変数、操作、関数、ミキシンを使用できます）。最大16のキーフレームステップ