LESS Hat简单教程

今天给大家推荐LESS的几个Mixin集，其中最著名的要数LESS Hat了，诚如其官方网站所言，“86个智能Mixin可以大大简化网页开发工作”。

另外，LESS Elements、Twitter Bootstrap和Preboot几个也不错，都是可以选择的。

笔者认为，LESS Hat提供的mixin最多，支持最广泛，建议大家使用。大家也可以参阅老外写的《Battle of the LESS Mixin Libraries》，比较几个库的使用。

使用LESS Hat时，只需要将LESS Hat 的less文件导入到网页，然后就可以享受便利了，代码如下

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

Less Hat拥有86个Mixins，详列如下

//  * =========================================================== * 
//  <                            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

为了让大家体会LESS Hat的便利，举个例子吧。我们给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;
}

而在LESS Hat的帮助下，我们只需这样写就行了

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

大家可以到官方帮助文档获取更多使用帮助。That's all. Thank you.

另外，打个广告，大家可以看看我在codepen里的一个案例。

---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------