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前端開發技術，分享網頁相關資源。
---------------------------------------------------------------