自己的乙個LESS工具函式庫

自己大概在一年前開始使用less編寫樣式，現在感覺不用less都不會寫樣式了。現在寫靜態頁面完全離不開less與zen coding，我可以不用什麼ide，但這兩個工具卻必須要，當然也強烈推薦看到這篇文章的朋友去試試less與zen coding（zen coding現在改名叫emmet）。

在使用less的過程中，自己慢慢積累了一些常用的less函式，經過自己的實踐，感覺還是很不錯，會讓你少寫很多的css hack，這也就少了很多的貼上，複製。效率能提高不少。下圖是helper.less的**結構：

//這是compat命名空間下的所有方法
#compat &:after }
.mixin(@type) when (@type = inline-block) .mixin(@type, @v) when(@type = opacity) .mixin(@type) when (@type = opacity) .mixin(@type, @color, @alpha) when (@type = rgba-bgc) .mixin(@type, @color, @alpha) when(@type = rgba-bdc) .mixin(@type) when(@type = hide-text) .mixin(@type) when(@type = wto) .mixin(@type, @fontname, @fontfileurl) when (@type = font-family) ";
src: url("@.eot"); 
/*ie9 compat modes 
*/src: url('@.eot?#iefix') format('embedded-opentype'), 
/*ie6-ie8 
*/url("@.woff") format('woff'), 
/*modern browsers 
*/url("@.ttf")  format('truetype'), 
/*safari, android, ios 
*/url("@.svg#yourwebfontname") format('svg'); 
/*legacy ios */}}}

下面是我們的具體demo例子：

//匯入函式庫
@import "helper";
//匯入配置
@import "config";
//demo1: 定義乙個常用的.clearfix
.clearfix //demo2: 定義自己的字型(使用font-icon)
#compat > .mixin(font-family, myfontfamily, '');
//demo3: 定義自己的字型,但引數通過config.less配置
#compat > .mixin(font-family, @fontfamilyname, @fontfileurl);
//demo4: 一步搞定顏色十六進製製到rgba的轉換
.rgbatest //demo5: 常用的opacity
.opcity27 //下面是編譯後生成的css
.clearfix .clearfix:before,
.clearfix:after .clearfix:after @font-face @font-face .rgbatest .opcity27

寫在最後，使用這樣的乙個less工具庫的好處：

1. 由於這些工具方法都是函式，所以在程式設計中函式有什麼優點，他都有，在一些ide中（如idea）甚至會給出相應的提示

2. 使用類似的工具庫後，我們編寫的less原檔案，**更優雅，更好閱讀，更容易維護

3. less的編譯可以使用koala（請google或baidu之）或grunt的相應外掛程式

自己的乙個LESS工具函式庫

自己實現乙個類似 jQuery 的函式庫

Linux下建立乙個自己的小型函式庫（c 靜態庫）

製作自己的c函式庫

自己的乙個LESS工具函式庫

自己實現乙個類似 jQuery 的函式庫

Linux下建立乙個自己的小型函式庫（c 靜態庫）

製作自己的c函式庫

相關推薦