Less hat simple tutorial _less

Today we recommend a few mixin sets of less, the most famous of which is less hat, as the official website says, "86 intelligent mixin can greatly simplify Web development work".

In addition, less Elements, Twitter Bootstrap and Preboot a few are also good, can be selected.

The author believes that less hat provides the most mixin, support the most extensive, recommended that everyone use. You can also see the foreigner wrote "Battle of the" less mixin libraries, to compare the use of several libraries.

When using less hat, you simply import the less file for less hat into the Web page, and then you can enjoy the convenience of the code as follows

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

Less hat has 86 mixins, listed below

* =========================================================== *//< Lesshat >//* =========================================================== *////Made with energy drinks i
n Prague, Czech Republic. Handcrafted by Petr Brzek, lesshat.com/works great with CSS Hat csshat.com//version:v2.0.15 (2014-01-31)//TAB
	LE 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//Bor
Der-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//Perspect
	Ive-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//Transi Tion-timing-function//Translate//Translate3d//Translatex//Translatey//Translatez//User-select

For the convenience of less hat, let's give an example. We'll animate 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;
}

And with the help of less hat, all we have to do is just write.

div {
 . Animation (nameanimation 2s linear alternate);
}

You can get more help from the official help document. That ' s all. Thank you.

In addition, an ad, you can look at my codepen in a case.

---------------------------------------------------------------
Front-End development Whqet, focus on the Web front-end development technology, sharing Web pages related resources.
---------------------------------------------------------------