本身的一個LESS工具函數庫

時間 2019-12-12

標籤本身一個工具函數简体版

原文原文鏈接

本身大概在一年前開始使用LESS編寫樣式，如今感受不用LESS都不會寫樣式了。如今寫靜態頁面徹底離不開LESS與Zen Coding，我能夠不用什麼IDE，但這兩個工具卻必需要，固然也強烈推薦看到這篇文章的朋友去試試LESS與Zen Coding（Zen Coding如今更名叫Emmet）。css

在使用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例子：less

//導入函數庫
@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);
}