René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"API: New shorthand mixins","articleBody":"The new **[shorthand mixins](https://github.com/codeworksdev/animate.less/blob/master/README.md#shorthand-mixins)** listed below provide an easy way to generate cross-browser CSS properties commonly used in animations and transitions.\r\n\r\n## SHORTHAND MIXINS\r\n_**Note:** These mixins use [**`#a.vendor`**](https://github.com/codeworksdev/animate.less/issues/47) to ensure cross-browser CSS properties are generated._\r\n```less\r\n#a.animation\r\n#a.animations\r\n#a.backface-visibility\r\n#a.delay\r\n#a.delay\r\n#a.direction\r\n#a.duration\r\n#a.duration\r\n#a.fill\r\n#a.iterate\r\n#a.timing\r\n#a.timing\r\n#a.transform\r\n#a.transform-origin\r\n#a.transition\r\n#a.transitions\r\n```\r\n\r\n\u003e **FOR EXAMPLE**\r\n\u003e You can create your own mixin to define one or more CSS properties with minimal effort:\r\n\u003e ```less\r\n\u003e .my_prefixed_mixin(@animation_name: none; @delay : 0s) {\r\n\u003e    #a.animation(@animation_name);\r\n\u003e    #a.delay(a, @delay);\r\n\u003e    }\r\n\u003e```\r\n\u003eAssuming **[`@o_animateless_prefixed`](https://github.com/codeworksdev/animate.less/issues/33)** is `true`, **`.my_prefixed_mixin(bounceIn)`** would generate:\r\n\u003e```css\r\n\u003e-webkit-animation-name: bounceIn;\r\n\u003e    -moz-animation-name: bounceIn;\r\n\u003e     -ms-animation-name: bounceIn;\r\n\u003e      -o-animation-name: bounceIn;\r\n\u003e         animation-name: bounceIn;\r\n\u003e-webkit-animation-delay: 0s;\r\n\u003e    -moz-animation-delay: 0s;\r\n\u003e     -ms-animation-delay: 0s;\r\n\u003e      -o-animation-delay: 0s;\r\n\u003e         animation-delay: 0s;\r\n\u003e```\r\n\r\n___\r\n\u003ca id=\"underscored-shorthand-mixins\"\u003e\u003c/a\u003e\r\n## UNDERSCORED SHORTHAND MIXINS\r\nAlternatively, you can use the **[underscored](https://github.com/codeworksdev/animate.less/blob/master/README.md#underscored-shorthand-mixins)** variants of the mixins listed above if you need to generate CSS properties for a specific vendor prefix only (defined by the `@vendor` variable).\r\n\r\n```less\r\n#a._animation\r\n#a._animations\r\n#a._backface-visibility\r\n#a._delay\r\n#a._delay\r\n#a._direction\r\n#a._duration\r\n#a._duration\r\n#a._fill\r\n#a._iterate\r\n#a._timing\r\n#a._timing\r\n#a._transform\r\n#a._transform-origin\r\n#a._transition\r\n#a._transitions\r\n```\r\n\r\n\u003e **FOR EXAMPLE**\r\n\u003e You can create your own mixin and define `@vendor` before generating one or more CSS properties.\r\n\u003e ```less\r\n\u003e .my_webkit_mixin(@animation_name: none; @delay : 0s) {\r\n\u003e    @vendor: -webkit-;\r\n\u003e    #a._animation(@animation_name);\r\n\u003e    #a._delay(a, @delay);\r\n\u003e    }\r\n\u003e```\r\n\u003eAssuming **`.my_webkit_mixin(bounceIn)`**, the above example would generate:\r\n\u003e```css\r\n\u003e-webkit-animation-name: bounceIn;\r\n\u003e-webkit-animation-delay: 0s;\r\n\u003e```","author":{"url":"https://github.com/codeworksdev","@type":"Person","name":"codeworksdev"},"datePublished":"2018-05-14T14:47:06.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/46/animate.less/issues/46"}