LessCSS und @KeyFrames

Question

Hat jemand Probleme mit weniger CSS und hatte @keyframes oder @-ms-keyframes? Es kompilt das CSS gut für gut @-webkit-keyframes, @-moz-keyframes und @-o-keyframes.

Answer 1

Diese sind whitelistische, -ms wird vermisst. keyframes sollte arbeiten: https://github.com/cloudhead/less.js/blob/master/lib/less/parser.js#l988

Es gibt eine offene Anfrage für eine Lösung: https://github.com/cloudhead/less.js/pull/498

Die gemeinsame Problemumgehung besteht darin, Keyframes in einen separaten zu stecken .css Datei, die Sie importieren - Dateien mit einer .css -Erweiterung werden nicht nach weniger analysiert.

Answer 2

Die KeyFrames -Generation scheint in weniger komprimiert zu sein, deshalb erschienen verschiedene Hacks und Tools wie:

• https://github.com/kuus/animate-me.lessEin bisschen kompliziertes Mixin, das sowohl Keyframes als auch Animation mit einem einzigen Anruf generiert. Akzeptiert sowohl animierte Elem Selector- als auch Keyframes -CSS -Inhalte als Zeichenfolgen. Bis zu 10 Schritte in Keyframes
• https://github.com/thybzi/keyframesMein Werkzeug inspiriert von Animate-Me und anderen Lösungen. Generiert nur Keyframes. Die Animation muss separat angewendet werden - so dass mehrere Animationen auf ein einzelnes Element sowie dieselben Keyframes auf mehrere Elemente angewendet werden können. Weitere Aktionen, die zum Erstellen von Keyframes erforderlich sind, verwenden jedoch echte CSS/weniger Weg, um ihren Stil zu generieren (so können Sie dort Variablen, Operationen, Funktionen und Mischungen verwenden). Bis zu 16 Keyframes -Schritte