LESS Hat简单教程

朱雀 2022-08-24 14:14 142阅读 0赞

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

![SouthEast][]

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

![SouthEast 1][]

![SouthEast 2][]

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

使用LESS Hat时，只需要将LESS Hat 的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里的一个[案例][Link 1]。

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

[LESS Hat]: http://lesshat.com/
[SouthEast]: /images/20220824/a9cfd29eec234bcbb5d9c075b6dd8b2c.png
[LESS Elements]: http://lesselements.com/
[Twitter Bootstrap]: http://getbootstrap.com/2.3.2/
[Preboot]: http://getpreboot.com/
[SouthEast 1]: /images/20220824/54bb9d312af6456dbfaed9d0f0c8e3e9.png
[SouthEast 2]: /images/20220824/b51ab786eb914f61bd1779e5991f283e.png
[Battle of the LESS Mixin Libraries]: http://designshack.net/articles/css/battle-of-the-less-mixin-libraries-less-elements-vs-less-hat-vs-bootstrap/
[Link 1]: http://codepen.io/whqet/pen/zdEsq