{"_id":"lesshat","_rev":"17-32edff7fea69ab76b735c21a63240078","name":"lesshat","description":"The most advanced LESS mixins library","dist-tags":{"latest":"4.1.0"},"versions":{"3.0.1":{"name":"lesshat","description":"Most advanced LESS CSS mixins library","version":"3.0.1","homepage":"http://lesshat.com/","author":{"name":"Petr Brzek","email":"petrbrzek@abdoc.net"},"contributors":[{"name":"Jan Kuca","url":"www.jankuca.com"}],"keywords":["less","mixins"],"repository":{"type":"git","url":"https://github.com/csshat/lesshat"},"bugs":{"url":"https://github.com/csshat/lesshat/issues"},"licenses":[{"type":"MIT","url":"https://github.com/csshat/lesshat/blob/master/LICENSE"}],"devDependencies":{"lesshat-devstack":"git://github.com/csshat/lesshat-devstack","grunt":"0.4.x","grunt-cli":"*","mocha":"1.12.0","grunt-prompt":"~0.1.2"},"scripts":{"test":"grunt test"},"_id":"lesshat@3.0.1","dist":{"shasum":"f840465d66da311a31afb80acb307cde53b45c61","tarball":"https://registry.npmjs.org/lesshat/-/lesshat-3.0.1.tgz","integrity":"sha512-cavO9La5GH7m0oz6hhZzPxAqDK1schqVC2D58EEU6RowV6RaIvoD5LSlj6gx1iiRPWRspYq4ZYqLaHZQxmrbUg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5LXSKxuWYoPJQAWxOexMTOmeriJWDKlF0+tY1834ryAiBXGN906RqwjMX+07fv0i6HKbkv+lFa6j5QG/iJb3msqw=="}]},"_from":".","_npmVersion":"1.4.3","_npmUser":{"name":"petrbrzek","email":"petrbrzek@abdoc.net"},"maintainers":[{"name":"petrbrzek","email":"petrbrzek@abdoc.net"}]},"3.0.2":{"name":"lesshat","description":"Most advanced LESS CSS mixins library","version":"3.0.2","homepage":"http://lesshat.com/","author":{"name":"Petr Brzek","email":"petrbrzek@abdoc.net"},"contributors":[{"name":"Jan Kuca","url":"www.jankuca.com"}],"keywords":["less","mixins"],"repository":{"type":"git","url":"https://github.com/csshat/lesshat"},"bugs":{"url":"https://github.com/csshat/lesshat/issues"},"licenses":[{"type":"MIT","url":"https://github.com/csshat/lesshat/blob/master/LICENSE"}],"devDependencies":{"lesshat-devstack":"git://github.com/csshat/lesshat-devstack","grunt":"0.4.x","grunt-cli":"*","mocha":"1.12.0","grunt-prompt":"~0.1.2"},"scripts":{"test":"grunt test"},"_id":"lesshat@3.0.2","dist":{"shasum":"25f1da3eadd67f5b266bdd215634bd087576eaae","tarball":"https://registry.npmjs.org/lesshat/-/lesshat-3.0.2.tgz","integrity":"sha512-kVYhtZrdY0FKDsqX1z132iwRmLBMJWWqOK1e+kaSNuerrvo/Jf3pfnuGhQzFjxhR0p2HEemcXgS3VbEzKRCDwA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCU3CSSIf7FQpHr5HWf1ZshG/uvdbip8IZDWPIy4rQgsQIgVH4ze1uGhRK6pI6mrTAuEHutaCANAiESaSE6qSj8iz4="}]},"_from":".","_npmVersion":"1.4.3","_npmUser":{"name":"petrbrzek","email":"petrbrzek@abdoc.net"},"maintainers":[{"name":"petrbrzek","email":"petrbrzek@abdoc.net"}]},"4.0.1":{"name":"lesshat","description":"Most advanced LESS mixins library","version":"4.0.1","homepage":"http://lesshat.com","author":{"name":"Petr Brzek","email":"petrbrzek@abdoc.net"},"contributors":[{"name":"Jan Kuca","url":"www.jankuca.com"},{"name":"Michel Boudreau","email":"michelboudreau@gmail.com"}],"keywords":["lesshat","less","css","mixins"],"repository":{"type":"git","url":"git+https://github.com/madebysource/lesshat.git"},"bugs":{"url":"https://github.com/madebysource/lesshat/issues"},"licenses":[{"type":"MIT","url":"https://github.com/madebysource/lesshat/blob/master/LICENSE"}],"devDependencies":{"grunt":"^1.0.1","grunt-contrib-clean":"^1.0.0","grunt-mkdir":"^1.0.0","grunt-prompt":"^1.3.3","lesshat-devstack":"github:madebysource/lesshat-devstack","mocha":"1.12.0"},"scripts":{"test":"grunt dev","build":"grunt default"},"_id":"lesshat@4.0.1","_shasum":"1082ea1facd29c0727a50dc28fdbf71c0389a38e","_from":"build","_resolved":"file:build","_npmVersion":"3.9.3","_nodeVersion":"6.2.1","_npmUser":{"name":"mboudreau","email":"michelboudreau@gmail.com"},"dist":{"shasum":"1082ea1facd29c0727a50dc28fdbf71c0389a38e","tarball":"https://registry.npmjs.org/lesshat/-/lesshat-4.0.1.tgz","integrity":"sha512-z1adyHIuTvitB3D7A3s6i0jiVHzDIe+y9+Qt4/7o/ZCv8lsN7GQdFch6gjCVwIBhy4Yxnp/K53WNRUpols7XMw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE23nJTsDNrRfMTQqBdb8Sadlq6mkGz/npRyi/nNBYmpAiEAsCl5spR0qzv/3kyUKzlYRwCMnp5oB5Jjc+AEqSrk+io="}]},"maintainers":[{"name":"petrbrzek","email":"petrbrzek@abdoc.net"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/lesshat-4.0.1.tgz_1465536804606_0.8417047732509673"}},"4.1.0":{"name":"lesshat","description":"The most advanced LESS mixins library","version":"4.1.0","homepage":"http://lesshat.com","author":{"name":"Michel Boudreau","email":"michelboudreau@gmail.com"},"contributors":[{"name":"Jan Kuca","url":"www.jankuca.com"},{"name":"Petr Brzek","email":"petrbrzek@abdoc.net"}],"keywords":["lesshat","less","css","mixins"],"repository":{"type":"git","url":"git+https://github.com/madebysource/lesshat.git"},"bugs":{"url":"https://github.com/madebysource/lesshat/issues"},"licenses":[{"type":"MIT","url":"https://github.com/madebysource/lesshat/blob/master/LICENSE"}],"devDependencies":{"grunt":"^1.0.1","grunt-contrib-clean":"^1.0.0","grunt-mkdir":"^1.0.0","grunt-prompt":"^1.3.3","mocha":"2.5.3","uglify-js":"~2.6.3","less":"^2.7.1"},"scripts":{"test":"grunt dev","build":"grunt default"},"_id":"lesshat@4.1.0","_shasum":"5a32dca36a5516569a486f8ed10dffff79d4c8e0","_from":"build","_resolved":"file:build","_npmVersion":"3.10.3","_nodeVersion":"6.3.0","_npmUser":{"name":"mboudreau","email":"michelboudreau@gmail.com"},"dist":{"shasum":"5a32dca36a5516569a486f8ed10dffff79d4c8e0","tarball":"https://registry.npmjs.org/lesshat/-/lesshat-4.1.0.tgz","integrity":"sha512-TrBB7GgAUwK5S1KZw5arpyqwkqUhx62QjZDn9LujUHX7eDkx9ofOorawhGP2yWRbgB0EIILGf8uWW4BHu8MNOA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFH/eaS3kPlDdiQGVZ/geSpQnUTDaJhGyi/V8jnaxvY2AiAeo8i2bMLefvzicg2YJuw+IEgLOM6XJ4c4rD3tscO1tQ=="}]},"maintainers":[{"name":"petrbrzek","email":"petrbrzek@abdoc.net"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/lesshat-4.1.0.tgz_1468940169797_0.870675768237561"}}},"readme":"<!---\nIf you want to edit README file, please do it in README-template.md.\nREADME.md file is automatically generated.\n{{ documentation }} syntax is replaced by all mixins documentation from mixins folder\n-->\n\n# lesshat [![Build Status](https://travis-ci.org/madebysource/lesshat.png)](https://travis-ci.org/madebysource/lesshat)\n\n![lesshat](https://raw.github.com/madebysource/lesshat/master/lesshat.png) ![Analytics](https://ga-beacon.appspot.com/UA-46020418-6/lesshat/readme?pixel)\n\n---\n**[Download latest](https://registry.npmjs.org/lesshat/-/lesshat-4.1.0.tgz) |**\n**[Get Started](#get-started) |**\n**[Introduction](#intro) |**\n**[Contribute](#contribute) |**\n**[Documentation](#documentation) |**\n\n---\n### Current version: v4.1.0 (2016-07-19)\n\n## <a name=\"get-started\"></a> Get started\nTo use lesshat, you need [node/npm installed](https://nodejs.org/) then run `npm install lesshat --save` to install and save lesshat into your package.json.  From here, you just need to reference the `node_modules/lesshat/lesshat.less` file within any of your project less files.  You can also use the prefixed version available at `node_module/lesshat/lesshat-prefixed.less` if you're worried about mixin name conflicts with other library.\n\n### Bower\nAs of version 4, lesshat has removed support for Bower by removing the build folder from the repository.  [There are many reasons that Bower is considered inadequate for dependency management](https://medium.com/@nickheiner/why-my-team-uses-npm-instead-of-bower-eecfe1b9afcb) and since people already use npm for dependency management simply to install Bower, another dependency manager, it felt a bit redundant.\n\nEven if Bower isn't supported, it can still be used with the tarball uploaded to npm.  You can add the dependency to your bower.json file like this:\n\n```\n\"dependencies\": {\n    \"lesshat\": \"https://registry.npmjs.org/lesshat/-/lesshat-4.0.1.tgz\"\n}\n```\n\nYou can also use the command line to install it by running `bower install lesshat=https://registry.npmjs.org/lesshat/-/lesshat-4.0.1.tgz --save`.\n\nAfter that, you can reference the less file directly the same way as the npm version with a slight path difference. The only downside is that bower will not update automatically because it doesn't support semantic versioning with files.\n\n*You should really consider using npm instead of bower.*\n\n## <a name=\"intro\"></a> Introduction\nWhy lesshat? In August 2012, while we were developing and extending [CSS Hat](www.madebysource.com) for LESS we needed universal mixins. Unfortunately, none of available were good enough that would satisfy our needs and that’s  why we created new custom ones on our own, which have become the most popular mixin library for the whole LESS CSS.\n\nMeet the best mixins library in the world.\n\n### Features\n* **No restrictions** – If it's possible in CSS, it must be possible to be done with a mixin. Unlimited number of anything, shadows, gradients, gradient swatches.\n* **Standard naming convention** – In lesshat, mixins have names like all CSS3 properties. No `.rounded` or `.shadow`. It's stupid.\n* **Cross-browser** – lesshat takes care of exporting CSS for all available browsers.\n* **Bootstrap friendly** – You can now use prefixed lesshat version and gaily work with Bootstrap. Yeah it's that easy.\n* **Keyframes** – Although it's tricky as hell, but yeah lesshat has mixin for `.keyframes`\n* **Blank state ready** – If you call mixin without any arguments, lesshat does not pollute your CSS with empty properties. Instead lesshat generates nothing.\n* **Workflow** – **No more one line editing!** We created developer friendly worklow for editing and creating mixins. You can test mixins with [MOCHA](http://visionmedia.github.io/mocha/), generate new mixin with [GRUNT](http://gruntjs.com/). Find out more about the workflow in **[contribution](#contribution)** section.\n\n### Structure of lesshat mixins\n\n1. **Typical lesshat mixin**:\n\n\t\t.supermixin(...) {\n  \t\t\t@process: ~`(function(){})()`;\n\n  \t\t\t-webkit-border-radius: @process;\n  \t\t\tborder-radius: @process;\n\t\t}\n\n\tIn @process variable is all magic. Please don't edit javascript directly in .less file. Instead use [lesshat-devstack](https://github.com/madebysource/lesshat-devstack).\n\n2. **Use (almost) every property without interpolation!**\n\n\tCorrect mixin calling:\n\n\t\t.background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%))\n\n\tIncorrect calling:\n\n\t\t.background-image(~'linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%)')\n\n\tUnfortunately, there are exceptions:\n\n\t\t.keyframes(~'');\n\t\t.calc(~'');\n\t\t.selection(~'');\n\n\t\t// in some cases you have to interpolate border-radius or LESS CSS begins to play on calculator\n\t\t.border-radius(~'20px / 40px');\n\n\n\n## <a name=\"contribute\"></a> Contribute:\n1. Fork this repo\n2. run `npm install`\n3. If you create new mixin, please add tests and documentation on how to use it\n4. Always test your changes and make sure that the documentation is being added to the README.md by running `grunt`\n6. Finally, commit your changes and create a pull request\n\n\n## <a name=\"documentation\"></a> Documentation:\n\n### List of mixins:\n1. **[align-content](#align-content)** `flexbox`\n2. **[align-items](#align-items)** `flexbox`\n3. **[align-self](#align-self)** `flexbox`\n4. **[animation](#animation)**\n5. **[animation-delay](#animation-delay)**\n6. **[animation-direction](#animation-direction)**\n7. **[animation-duration](#animation-duration)**\n8. **[animation-fill-mode](#animation-fill-mode)**\n9. **[animation-iteration-count](#animation-iteration-count)**\n10. **[animation-name](#animation-name)**\n11. **[animation-play-state](#animation-play-state)**\n12. **[animation-timing-function](#animation-timing-function)**\n13. **[appearance](#appearance)**\n14. **[backface-visibility](#backface-visibility)**\n15. **[background-clip](#background-clip)**\n16. **[background-image](#background-image)**\n17. **[background-origin](#background-origin)**\n18. **[background-size](#background-size)**\n19. **[blur](#blur)** `filter`\n20. **[border-bottom-left-radius](#border-bottom-left-radius)**\n21. **[border-bottom-right-radius](#border-bottom-right-radius)**\n22. **[border-image](#border-image)**\n23. **[border-radius](#border-radius)**\n24. **[border-top-left-radius](#border-top-left-radius)**\n25. **[border-top-right-radius](#border-top-right-radius)**\n26. **[box-shadow](#box-shadow)**\n27. **[box-sizing](#box-sizing)**\n28. **[brightness](#brightness)** `filter`\n29. **[calc](#calc)**\n29. **[column-count](#column-count)**\n30. **[column-gap](#column-gap)**\n31. **[column-rule](#column-rule)**\n32. **[column-width](#column-width)**\n33. **[columns](#columns)**\n34. **[contrast](#contrast)** `filter`\n35. **[display](#display)** `flexbox`\n36. **[drop-shadow](#drop-shadow)** `filter`\n37. **[filter](#filter)**\n38. **[flex](#flex)** `flexbox`\n39. **[flex-basis](#flex-basis)** `flexbox`\n40. **[flex-direction](#flex-direction)** `flexbox`\n41. **[flex-grow](#flex-grow)** `flexbox`\n42. **[flex-shrink](#flex-shrink)** `flexbox`\n43. **[flex-wrap](#flex-wrap)** `flexbox`\n44. **[font-face](#font-face)**\n45. **[grayscale](#grayscale)** `filter`\n46. **[hue-rotate](#hue-rotate)** `filter`\n47. **[hyphens](#hyphens)**\n47. **[invert](#invert)** `filter`\n48. **[justify-content](#justify-content)** `flexbox`\n49. **[keyframes](#keyframes)**\n50. **[opacity](#opacity)**\n51. **[order](#order)**\n52. **[perspective](#perspective)**\n53. **[perspective-origin](#perspective-origin)**\n54. **[placeholder](#placeholder)**\n55. **[rotate](#rotate)** `transform`\n56. **[rotate3d](#rotate3d)** `transform`\n57. **[rotateX](#rotateX)** `transform`\n58. **[rotateY](#rotateY)** `transform`\n59. **[rotateZ](#rotateZ)** `transform`\n60. **[saturate](#saturate)** `filter`\n61. **[scale](#scale)** `transform`\n62. **[scale3d](#scale3d)** `transform`\n63. **[scaleX](#scaleX)** `transform`\n64. **[scaleY](#scaleY)** `transform`\n65. **[scaleZ](#scaleZ)** `transform`\n66. **[selection](#selection)**\n67. **[sepia](#sepia)** `filter`\n68. **[size](#size)** `width, height`\n69. **[skew](#skew)** `transform`\n70. **[skewX](#skewX)** `transform`\n71. **[skewY](#skewY)** `transform`\n72. **[transform](#transform)**\n73. **[transform-origin](#transform-origin)**\n74. **[transform-style](#transform-style)**\n75. **[transition](#transition)**\n76. **[transition-delay](#transition-delay)**\n77. **[transition-duration](#transition-duration)**\n78. **[transition-property](#transition-property)**\n79. **[transition-timing-function](#transition-timing-function)**\n80. **[translate](#translate)** `transform`\n81. **[translate3d](#translate3d)** `transform`\n82. **[translateX](#translateX)** `transform`\n83. **[translateY](#translateY)** `transform`\n84. **[translateZ](#translateZ)** `transform`\n85. **[user-select](#user-select)**\n\n***\n\n### <a name=\"align-content\"></a> &#8226; align-content\n**Summary:**\n\nThe CSS align-content property aligns a flex container's lines within the flex container when there is an extra space on the cross-axis. This property has no effect on the single line flexible boxes.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/a/align-content/)**\n\n**Syntax:**\n\nDefault value: stretch\n\n    .align-content(flex-start | flex-end | center | space-between | space-around | stretch)\n\n**Example:**\n\n    div {\n     .align-content(flex-start);\n    }\n    \n    // Result\n    div {\n     -webkit-align-content: flex-start;\n     -ms-flex-line-pack: start;\n     align-content: flex-start;\n    } \n\n\n\n### <a name=\"align-items\"></a> &#8226; align-items\n**Summary:**\n\nThe CSS align-items property aligns flex items of the current flex line the same way as justify-content but in the perpendicular direction.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/a/align-items/)**\n\n**Syntax:**\n\nDefault value: stretch\n\n    .align-items(flex-start | flex-end | center | baseline | stretch)\n\n**Example:**\n\n    div {\n     .align-items(flex-start);\n    }\n    \n    // Result\n    div {\n     -webkit-box-align: flex-start;\n     -moz-box-align: start;\n     -webkit-align-items: start;\n     -ms-flex-align: flex-start;\n     align-items: flex-start;\n    }\n  \n\n\n### <a name=\"align-self\"></a> &#8226; align-self\n**Summary:**\n\nThe align-self CSS property aligns flex items of the current flex line overriding the align-items value. If any of the flex item's cross-axis margin is set to auto, then align-self is ignored.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/a/align-self/)**\n\n**Syntax:**\n\nDefault value: auto\n\n    .align-self(auto | flex-start | flex-end | center | baseline | stretch)\n\n**Example:**\n\n    div {\n     .align-self(flex-start);\n    }\n    \n    // Result\n    div {\n     -webkit-align-self: flex-start;\n     -ms-flex-item-align: start;\n     align-self: flex-start;\n    }\n\n\n\n### <a name=\"animation\"></a> &#8226; animation\n**Summary:**\n\nShorthand to define a CSS animation, setting all parameters at once.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/animation/animation)**, **[CSS3files](http://www.css3files.com/animation/)**\n\n**Syntax:**\n\nDefault value: none\n\n    .animation(animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-fill-mode , […]*)\n\n**Example:**\n\n    div {\n     .animation(nameAnimation 2s linear alternate);\n    }\n    \n    // Result\n    div {\n     -webkit-animation: nameAnimation 2s linear alternate;\n     -moz-animation: nameAnimation 2s linear alternate;\n     -o-animation: nameAnimation 2s linear alternate;\n     animation: nameAnimation 2s linear alternate;\n    }\n\n\n\n### <a name=\"animation-delay\"></a> &#8226; animation-delay\n**Summary:**\n\nDefines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/animation-delay)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .animation-delay(<time>, …)\n  \n**Tips and tricks:**\n\nIf you omit units after time argument, `animation-delay` is trying to be smart and add properly value.\n\n    if (time > 10) {\n        time += 'ms';\n      } else {\n        time += 's';\n      }\n\n**Example:**\n\n    div {\n     .animation-delay(2, 200);\n    }\n    \n    // Result\n    div {\n     -webkit-animation-delay: 2s, 200ms;\n     -moz-animation-delay: 2s, 200ms;\n     -o-animation-delay: 2s, 200ms;\n     animation-delay: 2s, 200ms;\n    }\n\n\n\n### <a name=\"animation-direction\"></a> &#8226; animation-direction\n**Summary:**\n\nThe animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/animation-direction)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)**\n\n**Syntax:**\n\nDefault value: normal\n\n    .animation-direction(<single-animation-direction>, …)\n  \n**Example:**\n\n    div {\n     .animation-direction(reverse, alternate);\n    }\n    \n    // Result\n    div {\n     -webkit-animation-direction: reverse, alternate;\n     -moz-animation-direction: reverse, alternate;\n     -o-animation-direction: reverse, alternate;\n     animation-direction: reverse, alternate;\n    }\n\n\n\n### <a name=\"animation-duration\"></a> &#8226; animation-duration\n**Summary:**\n\nThe animation-duration CSS property specifies the length of time that an animation should take to complete one cycle.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/animation-duration)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .animation-duration(<time>, …)\n  \n**Tips and tricks:**\n\nIf you omit units after time argument, `animation-duration` is trying to be smart and add proper value.\n\n    if (time > 10) {\n        time += 'ms';\n      } else {\n        time += 's';\n      }\n  \n**Example:**\n\n    div {\n     .animation-duration(2000);\n    }\n    \n    // Result\n    div {\n     -webkit-animation-duration: 2000ms;\n     -moz-animation-duration: 2000ms;\n     -o-animation-duration: 2000ms;\n     animation-duration: 2000ms;\n    }\n  \n\n\n### <a name=\"animation-fill-mode\"></a> &#8226; animation-fill-mode\n**Summary:**\n\nThe animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/animation-fill-mode)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode)**\n\n**Syntax:**\n\nDefault value: none\n\n    .animation-fill-mode(<single-animation-fill-mode>, …)\n  \n**Example:**\n\n    div {\n     .animation-fill-mode(forwards);\n    }\n    \n    // Result\n    div {\n     -webkit-animation-fill-mode: forwards;\n     -moz-animation-fill-mode: forwards;\n     -o-animation-fill-mode: forwards;\n     animation-fill-mode: forwards;\n    }\n\n\n\n### <a name=\"animation-iteration-count\"></a> &#8226; animation-iteration-count\n**Summary:**\n\nThe animation-iteration-count CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/animation-iteration-count)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count)**\n\n**Syntax:**\n\nDefault value: 1\n\n    .animation-iteration-count(<single-animation-iteration-count>, …)\n  \n**Example:**\n\n    div {\n     .animation-iteration-count(3);\n    }\n    \n    // Result\n    div {\n     -webkit-animation-iteration-count: 3;\n     -moz-animation-iteration-count: 3;\n     -o-animation-iteration-count: 3;\n     animation-iteration-count: 3;\n    } \n\n\n\n### <a name=\"animation-name\"></a> &#8226; animation-name\n**Summary:**\n\nThe animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/animation-name)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name)**\n\n**Syntax:**\n\nDefault value: none\n\n    .animation-name(<single-animation-name>, …)\n  \n**Example:**\n\n    div {\n     .animation-name(animation-1, animation-2);\n    }\n    \n    // Result\n    div {\n     -webkit-animation-name: animation-1, animation-2;\n     -moz-animation-name: animation-1, animation-2;\n     -o-animation-name: animation-1, animation-2;\n     animation-name: animation-1, animation-2;\n    } \n\n\n\n### <a name=\"animation-play-state\"></a> &#8226; animation-play-state\n**Summary:**\n\nThe animation-play-state CSS property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/animation-play-state)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state)**\n\n**Syntax:**\n\nDefault value: running\n\n    .animation-play-state(<single-animation-play-state>, …)\n  \n**Example:**\n\n    div {\n     .animation-play-state(paused);\n    }\n    \n    // Result\n    div {\n     -webkit-animation-play-state: paused;\n     -moz-animation-play-state: paused;\n     -o-animation-play-state: paused;\n     animation-play-state: paused;\n    } \n\n\n\n### <a name=\"animation-timing-function\"></a> &#8226; animation-timing-function\n**Summary:**\n\nThe animation-timing-function CSS property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/animation-timing-function)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)**\n\n**Syntax:**\n\nDefault value: ease\n\n    .animation-timing-function(<single-animation-timing-function>, …)\n  \n**Example:**\n\n    div {\n     .animation-timing-function(cubic-bezier(0.1, 0.7, 1.0, 0.1));\n    }\n    \n    // Result\n    div {\n     -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);\n     -moz-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);\n     -o-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);\n     animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);\n    } \n\n\n\n### <a name=\"appearance\"></a> &#8226; appearance\n**Summary:**\n\nAllows changing the style of any element to platform-based interface elements or vice versa.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/appearance)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/a/appearance/)**\n\n**Syntax:**\n\nDefault value: none\n\n    .appearance(<appearance>)\n  \n**Example:**\n\n    div {\n     .appearance();\n    }\n    \n    // Result\n    div {\n     -webkit-appearance: none;\n     -moz-appearance: none;\n     appearance: none;\n    } \n\n\n\n### <a name=\"backface-visibility\"></a> &#8226; backface-visibility\n**Summary:**\n\nThe CSS backface-visibility property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/backface-visibility)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility)**\n\n**Syntax:**\n\nDefault value: none\n\n    .backface-visibility(visible | hidden )\n  \n**Example:**\n\n    div {\n     .backface-visibility(hidden);\n    }\n    \n    // Result\n    div {\n     -webkit-backface-visibility: none;\n     -moz-backface-visibility: none;\n     -ms-backface-visibility: none;\n     -o-backface-visibility: none;\n     backface-visibility: none;\n    } \n\n\n\n### <a name=\"background-clip\"></a> &#8226; background-clip\n**Summary:**\n\nThe background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/background-clip)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip)**\n\n**Syntax:**\n\nDefault value: border-box\n\n    .background-clip(<box>)\n  \n**Example:**\n\n    div {\n     .background-clip(padding-box);\n    }\n    \n    // Result\n    div {\n     -webkit-background-clip: padding-box;\n     -moz-background-clip: padding-box;\n     background-clip: padding-box;\n    } \n\n\n\n### <a name=\"background-image\"></a> &#8226; background-image\n**Summary:**\n\nWith the background-image you can create prefixed linear or radial gradients. The CSS (linear|radial)-gradient() function creates an `<image>` which represents a linear|radial gradient of colors. The result of this function is an object of the CSS `<gradient>` data type. Like any other gradient, a CSS linear gradient is not a CSS `<color>` but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/functions/linear-gradient)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)**\n\n**Syntax:**\n\nDefault value: none\n\n    .background-image(<gradient>, ...)\n\n**Tips and tricks:**\n\nThe `background-image` mixin is the most robust mixin of all.     \nIt generates `SVG` for Internet Explorer 9, old webkit, moz and opera syntax.  \nAlways use W3C syntax for the mixin. It can recalculate angle for older syntax, transform `to top` to `bottom` syntax and it can omit SVG syntax if it's impossible to express SVG e.g. when you call mixin with 55deg.  \nIf you call mixin without arguments, LESS Hat does not generate anything.  \nGreat online gradient [generator](http://www.colorzilla.com/gradient-editor/).\n\n  \n**Example:**\n\n    div {\n     .background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%));\n    }\n    \n    // Result\n    div {\n     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmYjgzZmEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5M2NlYyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);\n     background-image: -webkit-linear-gradient(top, #fb83fa 0%, #e93cec 100%);\n     background-image: -moz-linear-gradient(top, #fb83fa 0%, #e93cec 100%);\n     background-image: -o-linear-gradient(top, #fb83fa 0%, #e93cec 100%);\n     background-image: linear-gradient(to bottom, #fb83fa 0%, #e93cec 100%);\n    }\n\n\n\n### <a name=\"background-origin\"></a> &#8226; background-origin\n**Summary:**\n\nThe background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/background-origin)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin)**\n\n**Syntax:**\n\nDefault value: padding-box\n\n    .background-origin(<box>)\n  \n**Example:**\n\n      div {\n       .background-origin(content-box);\n      }\n      \n      // Result\n      div {\n       -webkit-background-origin: content-box;\n       -moz-background-origin: content-box;\n       background-origin: content-box;\n      } \n\n\n\n### <a name=\"background-size\"></a> &#8226; background-size\n**Summary:**\n\nThe background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/background-size)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)**\n\n**Syntax:**\n\nDefault value: auto auto\n\n    .background-size(<bg-size>, ...)\n\n**Tips and tricks:**\n\nIf you omit units, `background-size` adds `px` automatically. \n  \n**Example:**\n\n    div {\n     .background-size(cover, 100%);\n    }\n    \n    // Result\n    div {\n     -webkit-background-size: cover, 100%;\n     -moz-background-size: cover, 100%;\n     background-size: cover, 100%;\n    } \n\n\n\n### <a name=\"blur\"></a> &#8226; blur (shorthand for filter property)\n**Summary:**\n\nApplies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.\n\nResources: **<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/filter#blur()\">MDN</a>**\n\n**Syntax:**\n\nDefault value: 0\n\n    .blur(length)\n\n**Tips and tricks:**\n\nIf you omit units, `blur` adds `px` automatically. \n  \n**Example:**\n\n    div {\n     .blur(5px);\n    }\n    \n    // Result\n    div {\n     -webkit-filter: blur(5px);\n     -moz-filter: blur(5px);\n     -ms-filter: blur(5px);\n     filter: blur(5px);\n    } \n\n\n\n### <a name=\"border-bottom-left-radius\"></a> &#8226; border-bottom-left-radius\n**Summary:**\n\nThe border-bottom-left-radius CSS property sets the rounding of the bottom-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/border-radius)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .border-bottom-left-radius(length | percentage)\n\n**Tips and tricks:**\n\nIf you omit units, `border-bottom-left-radius` adds `px` automatically. \nIf you want to use syntax like `10px \\ 5px`, you have to interpolate argument `~''` or LESS CSS divides it (yeah awesome feature!).\nAlso LESS Hat adds `background-clip: padding-box`, because it fixes problem with older Safari. Here is some [resource](http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed).\n  \n**Example:**\n\n    div {\n     .border-bottom-left-radius(10px);\n    }\n    \n    // Result\n    div {\n     -webkit-border-bottom-left-radius: 10px;\n     -moz-border-radius-bottomleft: 10px;\n     border-bottom-left-radius: 10px;\n    }   \n\n\n\n### <a name=\"border-bottom-right-radius\"></a> &#8226; border-bottom-right-radius\n**Summary:**\n\nThe border-bottom-right-radius CSS property sets the rounding of the bottom-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/border-radius)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .border-bottom-right-radius(length | percentage)\n\n**Tips and tricks:**\n\nIf you omit units, `border-bottom-right-radius` adds `px` automatically. \nIf you want to use syntax like `10px \\ 5px`, you have to interpolate argument `~''` or LESS CSS divides it (yeah awesome feature!).\nAlso LESS Hat adds `background-clip: padding-box`, because it fixes problem with older Safari. Here is some [resource](http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed).\n  \n**Example:**\n\n      div {\n       .border-bottom-right-radius(10px);\n      }\n      \n      // Result\n      div {\n       -webkit-border-bottom-right-radius: 10px;\n       -moz-border-radius-bottomright: 10px;\n       border-bottom-right-radius: 10px;\n      }   \n\n\n\n### <a name=\"border-image\"></a> &#8226; border-image\n**Summary:**\n\nThe border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/border-radius)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image)**\n\n**Syntax:**\n\nDefault value: based on individual properties\n\n    .border-image(border-image-source border-image-slice border-image-width border-image-outset border-image-repeat)\n\n**Tips and tricks:**\n\n  If you call mixin without arguments, LESS Hat does not generate anything.\n  Good border-image online [generator](http://border-image.com/).\n\n**Example:**\n\n    div {\n     .border-image(url(border.png) 61 45 62 54 repeat);\n    }\n    \n    // Result\n    div {\n     -webkit-border-image: url(border.png) 61 45 62 54 repeat;\n     -moz-border-image: url(border.png) 61 45 62 54 repeat;\n     -o-border-image: url(border.png) 61 45 62 54 repeat;\n     border-image: url(border.png) 61 45 62 54 repeat;\n    } \n\n\n\n### <a name=\"border-radius\"></a> &#8226; border-radius\n**Summary:**\n\nThe border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/border-radius)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .border-radius(length | percentage | length / length | percentage / percentage)\n\n**Tips and tricks:**\n\n  If you omit units, `border-radius` adds `px` automatically. \n  If you want to use syntax like `10px \\ 5px`, you have to interpolate argument `~''` or LESS CSS divides it (yeah awesome feature!).\n  Also LESS Hat adds `background-clip: padding-box`, because it fixes problem with older Safari. Here is some [resource](http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed).\n\n**Example:**\n\n    div {\n     .border-radius(5px);\n    }\n    \n    // Result\n    div {\n     -webkit-border-radius: 5px;\n     -moz-border-radius: 5px;\n     border-radius: 5px;\n    } \n\n\n\n### <a name=\"border-top-left-radius\"></a> &#8226; border-top-left-radius\n**Summary:**\n\nThe border-top-left-radius CSS property sets the rounding of the top-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/border-top-left-radius)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .border-top-left-radius(length | percentage)\n\n**Tips and tricks:**\n\n  If you omit units, `border-top-left-radius` adds `px` automatically. \n  If you want to use syntax like `10px \\ 5px`, you have to interpolate argument `~''` or LESS CSS divides it (yeah awesome feature!).\n  Also LESS Hat adds `background-clip: padding-box`, because it fixes problem with older Safari. Here is some [resource](http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed).\n\n**Example:**\n\n    div {\n     .border-top-left-radius(5px);\n    }\n    \n    // Result\n    div {\n     -webkit-border-top-left-radius: 5px;\n     -moz-border-top-left-radius: 5px;\n     border-top-left-radius: 5px;\n    } \n\n\n\n### <a name=\"border-top-right-radius\"></a> &#8226; border-top-right-radius\n**Summary:**\n\nThe border-top-right-radius CSS property sets the rounding of the top-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/border-top-right-radius)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .border-top-right-radius(length | percentage)\n\n**Tips and tricks:**\n\n  If you omit units, `border-top-right-radius` adds `px` automatically. \n  If you want to use syntax like `10px \\ 5px`, you have to interpolate argument `~''` or LESS CSS divides it (yeah awesome feature!).\n  Also LESS Hat adds `background-clip: padding-box`, because it fixes problem with older Safari. Here is some [resource](http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed).\n\n**Example:**\n\n    div {\n     .border-top-right-radius(5px);\n    }\n    \n    // Result\n    div {\n     -webkit-border-top-right-radius: 5px;\n     -moz-border-top-right-radius: 5px;\n     border-top-right-radius: 5px;\n    } \n\n\n\n### <a name=\"box-shadow\"></a> &#8226; box-shadow\n**Summary:**\n\nThe box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/box-shadow)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)**\n\n**Syntax:**\n\nDefault value: none\n\n    .box-shadow(<offset-x> <offset-y> spread blur-radius color inset, …)\n\n**Tips and tricks:**\n\n  If you omit units, `box-shadow` adds `px` automatically. \n\n**Example:**\n\n    div {\n     .box-shadow(0 1px 10px rgba(20,20,20,0.5));\n    }\n    \n    // Result\n    div {\n     -webkit-box-shadow: 0 1px 10px rgba(20,20,20,0.5);\n     -moz-box-shadow: 0 1px 10px rgba(20,20,20,0.5);\n     box-shadow: 0 1px 10px rgba(20,20,20,0.5);\n    } \n\n\n\n### <a name=\"box-sizing\"></a> &#8226; box-sizing\n**Summary:**\n\nThe box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/box-sizing)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)**\n\n**Syntax:**\n\nDefault value: content-box\n\n    .box-sizing(content-box | padding-box | border-box)\n\n**Example:**\n\n    div {\n     .box-sizing(padding-box);\n    }\n    \n    // Result\n    div {\n     -webkit-box-sizing: padding-box;\n     -moz-box-sizing: padding-box;\n     box-sizing: padding-box;\n    }\n\n\n\n### <a name=\"brightness\"></a> &#8226; brightness (shorthand for filter property)\n**Summary:**\n\nApplies a linear multiplier to input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results. If the ‘amount’ parameter is missing, a value of 100% is used.\n\nResources: **<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/filter#brightness()\">MDN</a>**\n\n**Syntax:**\n\nDefault value: 0\n\n    .brightness(amount)\n  \n**Example:**\n\n    div {\n     .brightness(0.5);\n    }\n    \n    // Result\n    div {\n     -webkit-filter: brightness(0.5);\n     -moz-filter: brightness(0.5);\n     -ms-filter: brightness(0.5);\n     filter: brightness(0.5);\n    } \n\n\n\n### <a name=\"calc\"></a> &#8226; calc\n**Summary:**\n\nThe calc() CSS function can be used anywhere a `<length>`, `<frequency>`, `<angle>`, `<time>`, `<number>`, or `<integer>` is required.With calc(), you can perform calculations to determine CSS property values.  \n\n**THIS MIXIN MUST BE INTERPOLATED ~''**  \nThe `-lh-property: 0` junk line of code is a neccesary sacrifice due to the hack nature of this set of mixins. (via [less-properties](https://github.com/borodean/less-properties))\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)**\n\n**Syntax:**\n\n    .calc(<element>, ~'<expression>')\n  \n**Example:**\n\n    div {\n     .calc(width, ~'100% - 33px');\n    }\n    \n    // Result\n    div {\n     -lh-property: 0;\n     width:-webkit-calc(100% - 33px);\n     width:-moz-calc(100% - 33px);\n     width:calc(100% - 33px);\n    } \n\n### <a name=\"column-count\"></a> &#8226; column-count\n**Summary:**\n\nThe column-count CSS property describes the number of columns of the element.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/column-count)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count)**\n\n**Syntax:**\n\nDefault value: auto\n\n    .column-count(<number> | auto)\n  \n**Example:**\n\n    div {\n     .column-count(3);\n    }\n    \n    // Result\n    div {\n     -webkit-column-count: 0.5;\n     -moz-column-count: 0.5;\n     column-count: 0.5;\n    }   \n\n\n\n### <a name=\"column-gap\"></a> &#8226; column-gap\n**Summary:**\n\nThe column-gap CSS property sets the size of the gap between columns for elements which are specified to display as a multi-column element.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/column-gap)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)**\n\n**Syntax:**\n\nDefault value: normal\n\n    .column-gap(<length> | normal)\n\n**Tips and tricks:**\n\n  If you omit units, `column-gap` adds `px` automatically. \n  \n**Example:**\n\n    div {\n     .column-gap(30);\n    }\n    \n    // Result\n    div {\n     -webkit-column-gap: 30px;\n     -moz-column-gap: 30px;\n     column-gap: 30px;\n    }   \n\n\n\n### <a name=\"column-rule\"></a> &#8226; column-rule\n**Summary:**\n\nIn multi-column layouts, the column-rule CSS property specifies a straight line, or \"rule\", to be drawn between each column.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/column-rule)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule)**\n\n**Syntax:**\n\nDefault value: medium none black\n\n    .column-rule(<column-rule-width> | <column-rule-style> | <column-rule-color>)\n\n**Tips and tricks:**\n\n  If you omit units, `column-rule` adds `px` automatically. \n  \n**Example:**\n\n    div {\n     .column-rule(5 outset #ff00ff);\n    }\n    \n    // Result\n    div {\n     -webkit-column-rule: 5px outset #ff00ff;\n     -moz-column-rule: 5px outset #ff00ff;\n     column-rule: 5px outset #ff00ff;\n    } \n\n\n\n### <a name=\"column-width\"></a> &#8226; column-width\n**Summary:**\n\nThe column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/column-width)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width)**\n\n**Syntax:**\n\nDefault value: auto\n\n    .column-width(<length> | auto)\n\n**Tips and tricks:**\n\n  If you omit units, `column-width` adds `px` automatically. \n  \n**Example:**\n\n    div {\n     .column-width(100px);\n    }\n    \n    // Result\n    div {\n     -webkit-column-width: 100px;\n     -moz-column-width: 100px;\n     column-width: 100px;\n    }  \n\n\n\n### <a name=\"columns\"></a> &#8226; columns\n**Summary:**\n\nThe columns CSS property is a shorthand property allowing to set both the column-width and the column-count properties at the same time.\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/properties/columns)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/columns)**\n\n**Syntax:**\n\nDefault value: auto\n\n    .columns(<column-width> | <column-count>)\n\n**Tips and tricks:**\n\n  If you omit units for column-width argument, `columns` adds `px` to it automatically. \n  \n**Example:**\n\n    div {\n     .columns(100 3);\n    }\n    \n    // Result\n    div {\n     -webkit-columns: 100px 3;\n     -moz-columns: 100px 3;\n     columns: 100px 3;\n    } \n\n\n\n### <a name=\"contrast\"></a> &#8226; contrast\n**Summary:**\n\nAdjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast. If the ‘amount’ parameter is missing, a value of 100% is used.\n\nResources: **<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/filter#contrast()\">MDN</a>**\n\n**Syntax:**\n\nDefault value: 100%\n\n    .contrast(<amount>)\n\n**Tips and tricks:**\n\n  If you omit units, `contrast` adds `%` automatically. \n  \n**Example:**\n\n    div {\n     .contrast(200);\n    }\n    \n    // Result\n    div {\n     -webkit-filter: contrast(200%);\n     -moz-filter: contrast(200%);\n     -ms-filter: contrast(200%);\n     filter: contrast(200%);\n    } \n\n\n\n### <a name=\"display\"></a> &#8226; display\n**Summary:**\n\nThe display CSS property specifies the type of rendering box used for an element. This mixin is specifically for flexbox purpose.\n\nResources: **[CSS-Tricks](http://css-tricks.com/snippets/css/a-guide-to-flexbox/)**\n\n**Syntax:**\n\n    .display(<flex> | <inline-flex>)\n  \n**Example:**\n\n    div {\n     .display(flex);\n    }\n    \n    // Result\n    div {\n     display: -webkit-box;\n     display: -ms-flexbox;\n     display: -webkit-flex;\n     display: -moz-box;\n    } \n\n\n\n### <a name=\"drop-shadow\"></a> &#8226; drop-shadow\n**Summary:**\n\nApplies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image.\n\nResources: **<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()\">MDN</a>**\n\n**Syntax:**\n\n    .drop-shadow(<offset-x> <offset-y> [<blur-radius> | <spread-radius> | <color>])\n\n**Tips and tricks:**\n\n  If you omit units, `drop-shadow` adds `px` automatically. \n  \n**Example:**\n\n    div {\n     .drop-shadow(16 16 10 black);\n    }\n    \n    // Result\n    div {\n     -webkit-filter: drop-shadow(16px 16px 10px #000000);\n     -moz-filter: drop-shadow(16px 16px 10px #000000);\n     -ms-filter: drop-shadow(16px 16px 10px #000000);\n     filter: drop-shadow(16px 16px 10px #000000);\n    } \n\n\n\n### <a name=\"filter\"></a> &#8226; filter\n**Summary:**\n\nThe CSS filter property provides for effects like blurring or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)**\n\n**Syntax:**\n\nDefault value: none\n\n    .filter(<filter-function>*)\n  \n**Example:**\n\n    div {\n     .filter(grayscale(0.5) blur(10px));\n    }\n    \n    // Result\n    div {\n     -webkit-filter: grayscale(0.5) blur(10px);\n     -moz-filter: grayscale(0.5) blur(10px);\n     -ms-filter: grayscale(0.5) blur(10px);\n     filter: grayscale(0.5) blur(10px);\n    }\n\n\n\n### <a name=\"flex\"></a> &#8226; flex\n**Summary:**\n\nThe flex CSS property specifies ability of a flex item to alter their dimensions to fill the available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/f/flex/)**\n\n**Syntax:**\n\nDefault value: 0 1 auto\n\n    .flex(none | [ <flex-grow> <flex-shrink> | <flex-basis> ])\n  \n**Example:**\n\n    div {\n     .flex(1 3 100px);\n    }\n    \n    // Result\n    div {\n     -webkit-box-flex: 1;\n     -moz-box-flex: 1;\n     -webkit-flex: 1 3 100px;\n     -ms-flex: 1 3 100px;\n     flex: 1 3 100px;\n    }\n\n\n\n### <a name=\"flex-basis\"></a> &#8226; flex-basis\n**Summary:**\n\nThe CSS flex-basis property specifies the flex basis which is the initial main size of a flex item.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/f/flex-basis/)**\n\n**Syntax:**\n\nDefault value: auto\n\n    .flex-basis(<width>)\n\n**Tips and tricks:**\n\n  If you omit units, `flex-basis` adds `px` automatically. \n  \n**Example:**\n\n    div {\n     .flex-basis(100);\n    }\n    \n    // Result\n    div {\n     -webkit-flex-basis: 100;\n     flex-basis: 100px;\n    }\n\n\n\n### <a name=\"flex-direction\"></a> &#8226; flex-direction\n**Summary:**\n\nThe CSS flex-direction property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/f/flex-direction/)**\n\n**Syntax:**\n\nDefault value: row\n\n    .flex-direction(row | row-reverse | column | column-reverse) \n  \n**Example:**\n\n    div {\n     .flex-direction(row);\n    }\n    \n    // Result\n    div {\n     -webkit-box-direction: normal;\n     -moz-box-direction: normal;\n     -webkit-box-orient: horizontal;\n     -moz-box-orient: horizontal;\n     -webkit-flex-direction: row;\n     -ms-flex-direction: row;\n     flex-direction: row;\n    }\n\n\n\n### <a name=\"flex-grow\"></a> &#8226; flex-grow\n**Summary:**\n\nThe CSS flex-grow property specifies the flex grow factor of a flex item.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/f/flex-grow/)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .flex-grow(<number>) \n  \n**Example:**\n\n    div {\n     .flex-grow(2);\n    }\n    \n    // Result\n    div {\n     -webkit-flex-grow: 2;\n     flex-grow: 2;\n    }\n\n\n\n### <a name=\"flex-shrink\"></a> &#8226; flex-shrink\n**Summary:**\n\nThe CSS flex-shrink property specifies the flex shrink factor of a flex item.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/f/flex-shrink/)**\n\n**Syntax:**\n\nDefault value: 1\n\n    .flex-shrink(<number>) \n  \n**Example:**\n\n    div {\n     .flex-shrink(2);\n    }\n    \n    // Result\n    div {\n     -webkit-flex-shrink: 2;\n     flex-shrink: 2;\n    }\n\n\n\n### <a name=\"flex-wrap\"></a> &#8226; flex-wrap\n**Summary:**\n\nThe CSS flex-wrap property specifies whether the children are forced into a single line or if the items can be flowed on multiple lines.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/f/flex-wrap/)**\n\n**Syntax:**\n\nDefault value: nowrap\n\n    .flex-wrap(nowrap | wrap | wrap-reverse) \n  \n**Example:**\n\n    div {\n     .flex-wrap(wrap-reverse);\n    }\n    \n    // Result\n    div {\n     -webkit-flex-wrap: 2;\n     -ms-flex-wrap: 2;\n     flex-wrap: 2;\n    }\n\n\n\n### <a name=\"font-face\"></a> &#8226; font-face\n**Summary:**\n\nThe @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)**\n\n**Syntax:**\n\n    .font-face(@fontname, @fontfile, @fontweight:normal, @fontstyle:normal) \n  \n**Example:**\n\n    div {\n     .font-face(Hipster, ~'../fonts/hipster', bold, italic);\n    }\n    \n    // Result\n    div {\n     font-family: \"Hipster\";\n     src: url(\"../fonts/hipster.eot\");\n     src: url(\"../fonts/hipster.eot?#iefix\") format(\"embedded-opentype\"), url(\"../fonts/hipster.woff\") format(\"woff\"), url(\"../fonts/hipster.ttf\") format(\"truetype\"), url(\"../fonts/hipster.svg#Hipster\") format(\"svg\");\n     font-weight: bold;\n     font-style: italic;\n    }\n\n\n\n### <a name=\"grayscale\"></a> &#8226; grayscale\n**Summary:**\n\nConverts the input image to grayscale. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 100% is used.\n\nResources: **<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/filter#grayscale()\">MDN</a>**\n\n**Syntax:**\n\nDefault value: 0\n\n    .grayscale(<percentage>) \n\n**Tips and tricks:**\n\n  If you omit units, `grayscale` adds `%` automatically. \n  \n**Example:**\n\n    div {\n     .grayscale(50);\n    }\n    \n    // Result\n    div {\n     -webkit-filter: grayscale(50%);\n     -moz-filter: grayscale(50%);\n     -ms-filter: grayscale(50%);\n     filter: grayscale(50%);\n    }\n\n\n\n### <a name=\"hue-rotate\"></a> &#8226; hue-rotate\n**Summary:**\n\nApplies a hue rotation on the input image. The value of ‘angle’ defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the ‘angle’ parameter is missing, a value of 0deg is used. Maximum value is 360deg.\n\nResources: **<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/filter#hue-rotate()\">MDN</a>**\n\n**Syntax:**\n\nDefault value: 0\n\n    .hue-rotate(<percentage>) \n\n**Tips and tricks:**\n\n  If you omit units, `hue-rotate` adds `deg` automatically. \n  \n**Example:**\n\n    div {\n     .hue-rotate(50);\n    }\n    \n    // Result\n    div {\n     -webkit-filter: hue-rotate(50deg);\n     -moz-filter: hue-rotate(50deg);\n     -ms-filter: hue-rotate(50deg);\n     filter: hue-rotate(50deg);\n    }\n\n\n\n### <a name=\"hyphens\"></a> &#8226; hyphens\n**Summary:**\n\nThe hyphens CSS property tells the browser how to go about splitting words to improve the layout of text when line-wrapping. \n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)**\n\n**Syntax:**\n\nDefault value: manual\n\n    .hyphens(none | manual | auto)\n  \n**Example:**\n\n    div {\n     .hyphens(none);\n    }\n    \n    // Result\n    div {\n     -webkit-hyphens: none;\n     -moz-hyphens: none;\n     -ms-hyphens: none;\n    } \n\n### <a name=\"invert\"></a> &#8226; invert\n**Summary:**\n\nInverts the samples in the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 100% is used.\n\nResources: **<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/filter#invert()\">MDN</a>**\n\n**Syntax:**\n\nDefault value: 0\n\n    .invert(<percentage>) \n\n**Tips and tricks:**\n\n  If you omit units, `invert` adds `%` automatically. \n  \n**Example:**\n\n    div {\n     .invert(100);\n    }\n    \n    // Result\n    div {\n     -webkit-filter: invert(100%);\n     -moz-filter: invert(100%);\n     -ms-filter: invert(100%);\n     filter: invert(100%);\n    }\n\n\n\n### <a name=\"justify-content\"></a> &#8226; justify-content\n**Summary:**\n\nThe CSS justify-content property defines how a browser distributes available space between and around elements when aligning flex items in the main-axis of the current line. \n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/j/justify-content/)**\n\n**Syntax:**\n\nDefault value: flex-start\n\n    .justify-content(flex-start | flex-end | center | space-between | space-around) \n  \n**Example:**\n\n    div {\n     .justify-content(flex-start);\n    }\n    \n    // Result\n    div {\n     -webkit-box-pack: flex-start;\n     -moz-box-pack: start;\n     -webkit-justify-content: start;\n     -ms-flex-pack: flex-start;\n     justify-content: flex-start;\n    }\n\n\n\n### <a name=\"keyframes\"></a> &#8226; keyframes\n**Summary:**\n\nThe @keyframes CSS at-rule lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation.  \n  \nLESS CSS isn't great for complicated mixin like this one, so it's little bit tricky.\nLESS CSS compiler doesn't allow to have properties in the root. It's better to understand the problem on the example.\n\n    // There is no selector\n    color: red;\n  \n    SyntaxError: properties must be inside selector blocks, they cannot be in the root. \n  \n    div { color: red; } // This is correct\n\nTherefore LESS Hat generates **placeholder** selector `lesshat-selector { -lh-property: 0; }` with unknown property, which browsers ignore and after that, there is actually keyframes syntax.  \n  \nAnd also because of bad architecture of LESS CSS language, keyframes definition has to be on single line.\n\n**THIS MIXIN MUST BE INTERPOLATED `~''`**\n\nResources: **[WebPlatform](http://docs.webplatform.org/wiki/css/atrules/@keyframes)**, **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)**\n\n**Syntax:**\n\n    .keyframes(~'<keyframes-name>, <keyframes-definition>') \n\n**Tips and tricks:**\n\n  Properties inside `<keyframes-definition>` are automatically prefixed, if it's needed.  \n  Keyframes mixin supports prefix configuration but it's computationally demanding so it is commented out and all prefixes are rendered. Feel free to uncommented that if you need it.\n  \n**Example:**\n\n    .keyframes(~'animationName, 0%{ transform: scale(1.5); color: blue; } 100%{ transform: scale(2); color: red }');\n    \n    // Result\n     lesshat-selector {-lh-property: 0; } \n     @-webkit-keyframes animationName{ 0%{ -webkit-transform: scale(1.5); color: blue; } 100%{ -webkit-transform: scale(2); color: red }}\n     @-moz-keyframes animationName{ 0%{ -moz-transform: scale(1.5); color: blue; } 100%{ -moz-transform: scale(2); color: red }}\n     @-o-keyframes animationName{ 0%{ -o-transform: scale(1.5); color: blue; } 100%{ -o-transform: scale(2); color: red }}\n     @keyframes animationName{ 0%{ transform: scale(1.5); color: blue; } 100%{ transform: scale(2); color: red };} \n\n\n\n### <a name=\"opacity\"></a> &#8226; opacity\n**Summary:**\n\nThe opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.  \n\nThis is not shorthand method for filter opacity.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)**\n\n**Syntax:**\n\nDefault value: 1\n\n    .opacity(<number>) \n\n**Tips and tricks:**\n\n  You can enable old filter syntax for IE6, just set `@ms_local: true`.\n  \n**Example:**\n\n    div {\n     .opacity(.5);\n    }\n    \n    // Result\n    div {\n     -webkit-opacity: 0.5;\n     -moz-opacity: 0.5;\n     opacity: 0.5;\n    }\n\n\n\n### <a name=\"order\"></a> &#8226; order\n**Summary:**\n\nThe CSS order property specifies the order used to lay out flex items in their flex container.  \n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/order)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/o/order/)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .order(<integer>) \n  \n**Example:**\n\n    div {\n     .order(1);\n    }\n    \n    // Result\n    div {\n     -webkit-box-ordinal-group: 1;\n     -moz-box-ordinal-group: 1;\n     -ms-flex-order: 1;\n     -webkit-order: 1;\n     order: 1;\n    }\n\n\n\n### <a name=\"perspective\"></a> &#8226; perspective\n**Summary:**\n\nThe perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/p/perspective/)**\n\n**Syntax:**\n\nDefault value: none\n\n    .perspective(none | <length>)\n\n**Tips and tricks:**\n\n  If you omit units, `perspective` adds `px` automatically.  \n  \n**Example:**\n\n    div {\n     .perspective(1000);\n    }\n    \n    // Result\n    div {\n     -moz-perspective: 1000px;\n     -webkit-perspective: 1000px;\n     perspective: 1000px;\n    }\n\n\n\n### <a name=\"perspective-origin\"></a> &#8226; perspective-origin\n**Summary:**\n\nThe perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin)**, **[CSS-Tricks](http://css-tricks.com/almanac/properties/p/perspective-origin/)**\n\n**Syntax:**\n\nDefault value: 50% 50%\n\n    .perspective-origin(<percentage> | <length> | constants | inherit)\n\n**Tips and tricks:**\n\n  If you omit units, `perspective-origin` adds `%` automatically.  \n  \n**Example:**\n\n    div {\n     .perspective-origin(top left);\n    }\n    \n    // Result\n    div {\n     -moz-perspective-origin: top left;\n     -webkit-perspective-origin: top left;\n     perspective-origin: top left;\n    }\n\n\n\n### <a name=\"placeholder\"></a> &#8226; placeholder\n**Summary:**\n\nPlaceholder is the short hint displayed in the input field before the user clicked to it.\nDefault placeholder text in inputs has a light gray color (so far). \n\nResources: **[CSS-Tricks](http://css-tricks.com/snippets/css/style-placeholder-text/)**\n\n**Syntax:**\n\n    .placeholder(<color>, [<element>])\n  \n**Example:**\n\n    div {\n     .placeholder(#666666);\n    }\n    \n    // Result\n    div::-webkit-input-placeholder {\n       color: #666666;\n    }\n    div:-moz-placeholder {\n       color: #666666;\n    }\n    div::-moz-placeholder {\n       color: #666666;\n    }\n    div:-ms-input-placeholder {\n       color: #666666;\n    }\n    \n    // In root (outside of selectors)\n    .placeholder(#333333);\n\n    // Result\n    ::-webkit-input-placeholder {\n       color: #666666;\n    }\n    :-moz-placeholder {\n       color: #666666;\n    }\n    ::-moz-placeholder {\n       color: #666666;\n    }\n    :-ms-input-placeholder {\n       color: #666666;\n    }\n\n    // In root (outside of selectors)\n    .placeholder(#333333, textarea);\n\n    // Result\n    textarea::-webkit-input-placeholder {\n       color: #666666;\n    }\n    textarea:-moz-placeholder {\n       color: #666666;\n    }\n    textarea::-moz-placeholder {\n       color: #666666;\n    }\n    textarea:-ms-input-placeholder {\n       color: #666666;\n    }\n\n\n\n### <a name=\"rotate\"></a> &#8226; rotate\n**Summary:**\n\nRotates the element clockwise around its origin by the specified angle. \n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#rotate)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .rotate(<angle>)\n\n**Tips and tricks:**\n\n  If you omit units, `rotate` adds `deg` automatically.  \n  \n**Example:**\n\n    div {\n     .rotate(45);\n    }\n    \n    // Result\n    div {\n     -webkit-transform: rotate(45deg);\n     -moz-transform: rotate(45deg);\n     -ms-transform: rotate(45deg);\n     -o-transform: rotate(45deg);\n     transform: rotate(45deg);\n    }\n\n\n### <a name=\"rotate3d\"></a> &#8226; rotate3d\n**Summary:**\n\nThe rotate3d()CSS function defines a transformation that moves the element around a fixed axe without deforming it.\n\nResources: **<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate3d()\">MDN</a>**\n\n**Syntax:**\n\nDefault value: 0, 0, 0, 0\n\n    .rotate3d(<number>, <number>, <number>, <angle>)\n\n**Tips and tricks:**\n\n  If you omit angle unit, `rotate3d` adds `deg` automatically.  \n  \n**Example:**\n\n    div {\n     .rotate3d(1, 0, 0, 50);\n    }\n    \n    // Result\n    div {\n     -webkit-transform: rotate3d(1, 0, 0, 50deg);\n     -moz-transform: rotate3d(1, 0, 0, 50deg);\n     -ms-transform: rotate3d(1, 0, 0, 50deg);\n     -o-transform: rotate3d(1, 0, 0, 50deg);\n     transform: rotate3d(1, 0, 0, 50deg);\n    }\n\n\n\n### <a name=\"rotateX\"></a> &#8226; rotateX\n**Summary:**\n\nThe rotateX() CSS function defines a transformation that moves the element around the abscissa without deforming it.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#rotateX)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .rotateX(<angle>)\n\n**Tips and tricks:**\n\n  If you omit units, `rotateX` adds `deg` automatically.  \n  \n**Example:**\n\n    div {\n     .rotateX(45);\n    }\n    \n    // Result\n    div {\n     -webkit-transform: rotateX(45deg);\n     -moz-transform: rotateX(45deg);\n     -ms-transform: rotateX(45deg);\n     -o-transform: rotateX(45deg);\n     transform: rotateX(45deg);\n    }\n\n\n### <a name=\"rotateY\"></a> &#8226; rotateY\n**Summary:**\n\nThe rotateY() CSS function defines a transformation that moves the element around the ordinate without deforming it.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#rotateY)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .rotateY(<angle>)\n\n**Tips and tricks:**\n\n  If you omit units, `rotateY` adds `deg` automatically.  \n  \n**Example:**\n\n    div {\n     .rotateY(45);\n    }\n    \n    // Result\n    div {\n     -webkit-transform: rotateY(45deg);\n     -moz-transform: rotateY(45deg);\n     -ms-transform: rotateY(45deg);\n     -o-transform: rotateY(45deg);\n     transform: rotateY(45deg);\n    }\n\n\n### <a name=\"rotateZ\"></a> &#8226; rotateZ\n**Summary:**\n\nThe rotateZ() CSS function defines a transformation that moves the element around the z-axis without deforming it.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#rotateZ)**\n\n**Syntax:**\n\nDefault value: 0\n\n    .rotateZ(<angle>)\n\n**Tips and tricks:**\n\n  If you omit units, `rotateZ` adds `deg` automatically.  \n  \n**Example:**\n\n    div {\n     .rotateZ(45);\n    }\n    \n    // Result\n    div {\n     -webkit-transform: rotateZ(45deg);\n     -moz-transform: rotateZ(45deg);\n     -ms-transform: rotateZ(45deg);\n     -o-transform: rotateZ(45deg);\n     transform: rotateZ(45deg);\n    }\n\n  \n\n### <a name=\"saturate\"></a> &#8226; saturate\n  **Summary:**\n\n  Saturates the input image. The value of ‘amount’ defines the proportion of the conversion.\n\n  Resources: **<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/filter#saturate()\">MDN</a>**\n\n  **Syntax:**\n\n  Default value: 100%\n\n    .saturate(<amount>)\n\n  **Tips and tricks:**\n\n  If you omit units, `saturate` adds `%` automatically.  \n    \n  **Example:**\n\n    div {\n     .saturate(45);\n    }\n    \n    // Result\n    div {\n     -webkit-filter: saturate(45deg);\n     -moz-filter: saturate(45deg);\n     -ms-filter: saturate(45deg);\n     filter: saturate(45deg);\n    }\n\n\n\n### <a name=\"scale\"></a> &#8226; scale\n**Summary:**\n\nSpecifies a 2D scaling operation described by [sx, sy]. If sy isn't specified, it is assumed to be equal to sx.\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#scale)**\n\n**Syntax:**\n\nDefault value: 1\n\n    .scale(<sx>[, <sy>]) \n  \n**Example:**\n\n    div {\n     .scale(2);\n    }\n    \n    // Result\n    div {\n     -webkit-transform: scale(2);\n     -moz-transform: scale(2);\n     -ms-transform: scale(2);\n     -o-transform: scale(2);\n     transform: scale(2);\n    }\n\n\n### <a name=\"scale3d\"></a> &#8226; scale3d\n**Summary:**\n\nThe scale3d() CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales.\n\nResources: **<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale3d()\">MDN</a>**\n\n**Syntax:**\n\nDefault value: 1, 1, 1\n\n    .scale3d(<sx>, <sy>, <sz>) \n  \n**Example:**\n\n    div {\n     .scale3d(1.5, .2, 3);\n    }\n    \n    // Result\n    div {\n     -webkit-transform: scale3d(1.5, 0.2, 3);\n     -moz-transform: scale3d(1.5, 0.2, 3);\n     -ms-transform: scale3d(1.5, 0.2, 3);\n     -o-transform: scale3d(1.5, 0.2, 3);\n     transform: scale3d(1.5, 0.2, 3);\n    }\n\n\n\n### <a name=\"scaleX\"></a> &#8226; scaleX\n**Summary:**\n\nSpecifies a scale operation using the vector [sx, 1].\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#scaleX)**\n\n**Syntax:**\n\nDefault value: 1\n\n    .scaleX(<sx>) \n  \n**Example:**\n\n    div {\n     .scaleX(1.5);\n    }\n    \n    // Result\n    div {\n     -webkit-transform: scaleX(1.5);\n     -moz-transform: scaleX(1.5);\n     -ms-transform: scaleX(1.5);\n     -o-transform: scaleX(1.5);\n     transform: scaleX(1.5);\n    }\n\n\n### <a name=\"scaleY\"></a> &#8226; scaleY\n**Summary:**\n\nSpecifies a scale operation using the vector [1, sy].\n\nResources: **[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#scaleY)**\n\n**Syntax:**\n\nDefault value: 1\n\n    .scaleY(<sy>) \n  \n**Example:**\n\n    div {\n     .scaleY(1.5);\n    }\n    \n    // Result\n    div {\n     -webkit-transform: scaleY(1.5);\n     -moz-transform: scaleY(1.5);\n     -ms-transform: scaleY(1.5);\n     -o-transform: scaleY(1.5);\n     transform: scaleY(1.5);\n    }\n\n\n### <a name=\"scaleZ\"></a> &#8226; scaleZ\n**Summary:**\n\nThe scaleZ() CSS function modifies the z-coordinate of each element point by a constant facto, except if this scale factor is 1, in which case the function is the identity transform.\n\nResources: **<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleZ()\">MDN</a>**\n\n**Syntax:**\n\nDefault value: 1\n\n    .scaleZ(<sz>) \n  \n**Example:**\n\n    div {\n     .scaleZ(1.5);\n    }\n    \n    // Result\n    div {\n     -webkit-transform: scaleZ(1.5);\n     -moz-transform: scaleZ(1.5);\n     -ms-transform: scaleZ(1.5);\n     -o-transform: scaleZ(1.5);\n     transform: scaleZ(1.5);\n    }\n\n\n\n### <a name=\"selection\"></a> &#8226; selection\n**Summary:**\n\nThe ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted.\nLESS CSS compiler doesn't allow to have properties in the root. It's better to understand the problem on the example.\n\n    // There is no selector\n    color: red;\n  \n    SyntaxError: properties must be inside selector blocks, they cannot be in the root. \n  \n    div { color: red; } // This is correct\n\nTherefore LESS Hat generates **placeholder** selector `lesshat-selector { -lh-property: 0; }` with un","maintainers":[{"name":"petrbrzek","email":"petrbrzek@abdoc.net"}],"time":{"modified":"2022-06-19T11:42:41.253Z","created":"2014-06-17T19:55:36.604Z","3.0.1":"2014-06-17T19:55:36.604Z","3.0.2":"2014-06-17T22:03:53.820Z","3.0.3":"2016-06-09T13:43:23.478Z","4.0.0":"2016-06-10T05:24:54.560Z","4.0.1":"2016-06-10T05:33:27.020Z","4.1.0":"2016-07-19T14:56:12.165Z"},"homepage":"http://lesshat.com","keywords":["lesshat","less","css","mixins"],"repository":{"type":"git","url":"git+https://github.com/madebysource/lesshat.git"},"contributors":[{"name":"Jan Kuca","url":"www.jankuca.com"},{"name":"Petr Brzek","email":"petrbrzek@abdoc.net"}],"author":{"name":"Michel Boudreau","email":"michelboudreau@gmail.com"},"bugs":{"url":"https://github.com/madebysource/lesshat/issues"},"readmeFilename":"README.md","users":{"fstgeorge":true,"mrmaxmeranda":true}}