本身的一个LESS工具函数库

本身大概在一年前开始使用LESS编写样式，如今感受不用LESS都不会写样式了。如今写静态页面彻底离不开LESS与Zen Coding，我能够不用什么IDE，但这两个工具却必需要，固然也强烈推荐看到这篇文章的朋友去试试LESS与Zen Coding（Zen Coding如今更名叫Emmet）。

在使用LESS的过程当中，本身慢慢积累了一些经常使用的LESS函数，通过本身的实践，感受仍是很不错，会让你少写不少的css hack，这也就少了不少的粘贴，复制。效率能提升很多。下图是helper.less的代码结构：

//这是compat命名空间下的全部方法
#compat {
    .mixin (@type) when (@type = clearfix) {
        *zoom: 1;
        &:before,
        &:after {
            content: "\20";
            display: table;
            line-height: 0;
        }
        &:after {
            clear: both;
        }
    }

    .mixin(@type) when (@type = inline-block) {
        display:inline-block;;
        *display:inline;
        *zoom:1;
    }

    .mixin(@type, @v) when(@type = opacity) {
        @msv: unit(percentage(@v));
        opacity: @v;
        filter:alpha(opacity=@msv);
    }

    .mixin(@type) when (@type = opacity) {
        @v: 0.5;
        @msv: unit(percentage(@v));
        opacity: @v;
        filter:alpha(opacity=@msv);
    }


    .mixin(@type, @color, @alpha) when (@type = rgba-bgc) {
        @r: red(@color);
        @g: green(@color);
        @b: blue(@color);

        @color2: rgba(@r, @g, @b, @alpha);
        @ie: argb(@color2);

        background-color: rgba(@r, @g, @b, @alpha);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=@ie,EndColorStr=@ie);
    }

    .mixin(@type, @color, @alpha) when(@type = rgba-bdc) {
        @r: red(@color);
        @g: green(@color);
        @b: blue(@color);

        border-color: rgba(@r, @g, @b, @alpha);
    }

    .mixin(@type) when(@type = hide-text) {
        white-space: nowrap;
        text-indent: 100%;
        overflow: hidden;
    }

    .mixin(@type) when(@type = wto) {
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
    }
    
    .mixin(@type, @fontName, @fontFileURL) when (@type = font-family) {
        @font-face {
            font-family: "@{fontName}";
            src: url("@{fontFileURL}.eot"); /* IE9 Compat Modes */
            src: url('@{fontFileURL}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url("@{fontFileURL}.woff") format('woff'), /* Modern Browsers */
            url("@{fontFileURL}.ttf")  format('truetype'), /* Safari, Android, iOS */
            url("@{fontFileURL}.svg#YourWebFontName") format('svg'); /* Legacy iOS */
        }
    }
}

下面是咱们的具体Demo例子：

//导入函数库
@import "helper";

//导入配置
@import "config";

//demo1: 定义一个经常使用的.clearfix
.clearfix {
    #compat > .mixin(clearfix);
}

//demo2: 定义本身的字体(使用font-icon)
#compat > .mixin(font-family, myFontFamily, 'http://l.com/font/myFontFamily');

//demo3: 定义本身的字体,但参数经过config.less配置
#compat > .mixin(font-family, @fontFamilyName, @fontFileURL);

//demo4: 一步搞定颜色十六进制到rgba的转换
.rgbaTest {
    #compat > .mixin(rgba-bgc, #000, 0.27);
}

//demo5: 经常使用的opacity
.opcity27 {
    #compat > .mixin(opacity, .27);
}

//下面是编译后生成的css
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "\20";
  display: table;
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
@font-face {
  font-family: "myFontFamily";
  src: url("http://l.com/font/myFontFamily.eot");
  src: url('http://l.com/font/myFontFamily.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url("http://l.com/font/myFontFamily.woff") format('woff'), /* Modern Browsers */
   url("http://l.com/font/myFontFamily.ttf") format('truetype'), /* Safari, Android, iOS */
   url("http://l.com/font/myFontFamily.svg#YourWebFontName") format('svg');/* IE9 Compat Modes */
  /* Legacy iOS */
}
@font-face {
  font-family: "lessTest";
  src: url("http://www.jagus720.com/font/fontTest.eot");
  src: url('http://www.jagus720.com/font/fontTest.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url("http://www.jagus720.com/font/fontTest.woff") format('woff'), /* Modern Browsers */
   url("http://www.jagus720.com/font/fontTest.ttf") format('truetype'), /* Safari, Android, iOS */
   url("http://www.jagus720.com/font/fontTest.svg#YourWebFontName") format('svg');/* IE9 Compat Modes */
  /* Legacy iOS */
}
.rgbaTest {
  background-color: rgba(0, 0, 0, 0.27);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#45000000, EndColorStr=#45000000);
}
.opcity27 {
  opacity: 0.27;
  filter: alpha(opacity=27);
}

写在最后，使用这样的一个LESS工具库的好处：

1. 因为这些工具方法都是函数，因此在编程中函数有什么优势，他都有，在一些IDE中（如IDEA）甚至会给出相应的提示

   

2. 使用相似的工具库后，咱们编写的LESS原文件，代码更优雅，更好阅读，更容易维护

3. LESS的编译能够使用Koala（请Google或Baidu之）或grunt的相应插件

固然，这个helper.less自己写的仍是很通常，如里面的percentage模块就很很差，但也没想到更好的方法。你们若是有什么建议，请留言，很是感受！

点击下载helper.less及示例