LESS Hat simple tutorial

Today, we recommend several LESS mixins, the most famous of which is LESS Hat. As stated on its official website, "86 smart mixins can greatly simplify web page development ".

In addition, LESS Elements, Twitter Bootstrap, and Preboot are both good options.

The author believes that LESS Hat provides the largest number of mixins and supports the widest range. We recommend that you use them. You can also refer to "Battle of the LESS Mixin Libraries" written by foreigners to compare the usage of several Libraries.

When using LESS Hat, you only need to import the LESS Hat files to the web page, and then you can enjoy the convenience. The Code is as follows:

<link rel="stylesheet/less" href="less/lesshat.less" />

Less Hat has 86 Mixins, which are listed as follows:

//  * =========================================================== * //  <                            LESSHat                          > //  * =========================================================== * //// Made with Energy drinks in Prague, Czech Republic.// Handcrafted by Petr Brzek, lesshat.com// Works great with CSS Hat csshat.com// version: v2.0.15 (2014-01-31)// TABLE OF MIXINS:// align-content// align-items// align-self// animation// animation-delay// animation-direction// animation-duration// animation-fill-mode// animation-iteration-count// animation-name// animation-play-state// animation-timing-function// appearance// backface-visibility// background-clip// background-image// background-origin// background-size// blur// border-bottom-left-radius// border-bottom-right-radius// border-image// border-radius// border-top-left-radius// border-top-right-radius// box-shadow// box-sizing// brightness// calc// column-count// column-gap// column-rule// column-width// columns// contrast// display// drop-shadow// filter// flex// flex-basis// flex-direction// flex-grow// flex-shrink// flex-wrap// font-face// grayscale// hue-rotate// hyphens// invert// justify-content// keyframes// opacity// order// perspective// perspective-origin// placeholder// rotate// rotate3d// rotateX// rotateY// rotateZ// saturate// scale// scale3d// scaleX// scaleY// scaleZ// selection// sepia// size// skew// skewX// skewY// transform// transform-origin// transform-style// transition// transition-delay// transition-duration// transition-property// transition-timing-function// translate// translate3d// translateX// translateY// translateZ// user-select

Let's take a look at the convenience of LESS Hat. Let's make an animation for the div.

div { -webkit-animation: nameAnimation 2s linear alternate; -moz-animation: nameAnimation 2s linear alternate; -opera-animation: nameAnimation 2s linear alternate; animation: nameAnimation 2s linear alternate;}

With the help of LESS Hat, we only need to write it in this way.

div { .animation(nameAnimation 2s linear alternate);}

You can go to the official help documentation for more help. That's all. Thank you.

In addition, let's take a look at a case in codepen.

---------------------------------------------------------------
Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------