css之less混合函数方法

css之less混合函数方法 

/*
    参数
*/

// 阴影色
@shadowColor: rgba(0,0,0,.20);
// 文本框提示字颜色
@placeholderColor: #97a8be;

/*
    函数
*/

//---垂直居中布局
.verticalLayout(@left: auto, @right: auto, @top: 0, @bottom: 0, @position: absolute) {
    position: @position;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
    margin: auto;
}

//---完全居中布局
.completeCenter(@left: 0, @right: 0, @top: 0, @bottom: 0, @position: absolute) {
    position: @position;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
    margin: auto;
}

//---严格盒模型
.boxSizing (@fn:1) when (@fn = 1) { 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.boxSizing (@fn:1) when (@fn > 1) { 
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

//---盒子阴影颜色
.boxShadow(@range:10px,@color:@shadowColor,@x:0,@y:0,@ins:false) when (@ins=false){
    -webkit-box-shadow: @x @y @range @color;
    -moz-box-shadow: @x @y @range @color;
    box-shadow: @x @y @range @color;
}
.boxShadow(@range:10px,@color:@shadowColor,@x:0,@y:0,@ins:false) when (@ins=true){
    -webkit-box-shadow: inset @x @y @range @color;
    -moz-box-shadow: inset @x @y @range @color;
    box-shadow: inset @x @y @range @color;
}

//---透明度
.opacity(@alpha){
    @newAlpha: @alpha*100;
    filter: alpha(opacity= @newAlpha);  
    -moz-opacity:@alpha;  
    -khtml-opacity: @alpha;  
    opacity: @alpha;  
}

//---单行/多行文字溢出省略
.ellipsis(@line:1) when (@line=1){
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis(@line:1) when (@line>1){
    display: -webkit-box!important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
}

//---圆角(全方向)
.borderRadiusAll(@pixel:50%){
    -webkit-border-radius: @pixel;
    border-radius: @pixel;
}
.borderRadius(@leftTop:0,@rightTop:0,@rightBottom:0,@leftBottom:0){
    -webkit-border-radius: @arguments;
    border-radius: @arguments;
}

//---输入框无输入 提示
.placeholder(@color:@placeholderColor,@pixel:14px,@lh:1.4){
    &::-webkit-input-placeholder{
        color: @color;
    }
    &:-moz-placeholder{
        color: @color;
    }
    &::-moz-placeholder{
        color: @color;
    }
    &:-ms-input-placeholder{
        color: @color;
    }
    font-size: @pixel;
    line-height: @lh;
    font-family: "Microsoft Yahei UI", "Microsoft Yahei", "微软雅黑", "Segoe UI", "Tahoma", "SimSun";
    
}

//---过渡
.transition(@property: all, @duration: 0s, @timing-function: ease, @delay: 0s){
    -webkit-transition: @property @duration @timing-function @delay;
    -moz-transition: @property @duration @timing-function @delay;
    -o-transition: @property @duration @timing-function @delay;
    transition: @property @duration @timing-function @delay;
}
//---变形(自行补充)
.transformTS(@translate3d,@scaleY){
    -webkit-transform: @arguments;
    -moz-transform: @arguments;
    -o-transform: @arguments;
    transform: @arguments;
}
//---动画
.animationSingle(@name,@duration,@timingFn:linear,@delay:0s,@count:infinite){
    -webkit-animation: @name @duration @delay @timingFn @count;
    -moz-animation: @name @duration @delay @timingFn @count;
    -o-animation: @name @duration @delay @timingFn @count;
    animation: @name @duration @delay @timingFn @count;
}

//---变形中心
.transformOrigin(@x:50%, @y:50% , @z:0){
    -webkit-transform-origin: @x @y @z;
    -moz-transform-origin: @x @y @z;
    -o-transform-origin: @x @y @z;
    transform-origin: @x @y @z;
}

//---旋转
.rotate(@angle:0deg){
    -webkit-transform: rotate(@angle);
    -moz-transform: rotate(@angle);
    -o-transform: rotate(@angle);
    transform: rotate(@angle);
}

//---旋转自定义
.rotateCustom(){
    -webkit-transform: @arguments;
    transform: @arguments;
}

//---缩放
.scale(@zoom:0.8){
    -webkit-transform: scale(@zoom);
    -moz-transform: scale(@zoom);
    -o-transform: scale(@zoom);
    transform: scale(@zoom);
}

//---横向缩放
.scaleX(@zoom:0.8){
    -webkit-transform: scaleX(@zoom);
    -moz-transform: scaleX(@zoom);
    -o-transform: scaleX(@zoom);
    transform: scaleX(@zoom);
}

//---纵向缩放
.scaleY(@zoom:0.8){
    -webkit-transform: scaleY(@zoom);
    -moz-transform: scaleY(@zoom);
    -o-transform: scaleY(@zoom);
    transform: scaleY(@zoom);
}

//---3D转换
.transformStyle(@theStyle:preserve-3d){
    -webkit-transform-style: @theStyle;
    transform-style: @theStyle;
}

//---3d偏移
.translate3d(@x:0,@y:0,@z:0){
    -webkit-transform: translate3d(@x,@y,@z);
    -moz-transform: translate3d(@x,@y,@z);
    -o-transform: translate3d(@x,@y,@z);
    transform: translate3d(@x,@y,@z);
}

//---过滤
/**
  * 高斯模糊 blur(px)   0
  * 亮度 brightness(%)  1
  * 对比度 contrast(%)  1
  * 阴影 drop-shadow(h-shadow v-shadow blur spread color)
  * 灰度强化 grayscale(%)  0
  * 色相旋转 hue-rotate(deg)  0
  * 图像反转 invert(%)  0
  * 透明度 opacity(%) 1
  * 饱和度 saturate(%) 1
  * 褐色强化 sepia(%) 0
  */
.boxFilterDemo(){
    -webkit-filter: blur(0px) brightness(100%) contrast(100%) drop-shadow(0px 0px 0px 0px #000) grayscale(0%) hue-rotate(0deg) invert(0) opacity(1) saturate(100%) sepia(0%);
    filter: blur(0px) brightness(100%) contrast(100%) drop-shadow(0px 0px 0px 0px #000) grayscale(0%) hue-rotate(0deg) invert(0) opacity(1) saturate(100%) sepia(0%);
}
//--自定义过滤
.boxFilter(){
    -webkit-filter: @arguments;
    filter: @arguments;
}

//---盒子阴影颜色(自定义文本)
.boxShadowByText(@insetShadow,@shadow){
    -webkit-box-shadow: @insetShadow , @shadow;
    -moz-box-shadow: @insetShadow , @shadow;
    box-shadow: @insetShadow , @shadow;
}

//---元素的显示隐藏
/**
  * visible 默认值。元素是可见的。
  * hidden  元素是不可见的。
  * collapse    当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
  */
.visibility(@value:visible){
    visibility: @visible;
}

//---线性渐变
.gradient(@bColor,@eColor,@direction:null) when (@direction=null){
    background: -webkit-linear-gradient(left top, bColor, eColor);
    background: -o-linear-gradient(bottom right, bColor, eColor);
    background: -moz-linear-gradient(bottom right, bColor, eColor);
    background: linear-gradient(to bottom right, bColor, eColor);
}
.gradient(@bColor,@eColor,@direction:null) when (@direction=null){
    background: -moz-linear-gradient(top, bColor, eColor);
    background: -o-linear-gradient(top,bColor, eColor);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(bColor), to(eColor));
}
.gradient(@bColor,@eColor,@direction:null) when (@direction=null){
    background: -moz-linear-gradient(top, bColor, eColor);
    background: -o-linear-gradient(top,bColor, eColor);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(bColor), to(eColor));
}

//---背景图片
.backgroundImage(@url){
    background: url(@url) center center no-repeat;
    background-size: 100% 100%;
}

//---文本垂直居中/利用行高垂直居中
.textLineHeigth(@pixel){
    height: @pixel;
    line-height: @pixel;
}

//---字体间隔
.spacing(@pixel:1px){
    letter-spacing: @pixel;
}

//---字体间隔升级版
.spacingPlus(@pixel:1px){
    letter-spacing: @pixel;
    text-indent: @pixel;
}

//---删除间隙
.removeGap(@spacing:-4px){
    .spacing(@spacing);
    font-size: 0;
}

//显示模式，默认为溢出隐藏
.overflow(@mode:hidden){
    overflow: @mode;
}

//---镂空按钮悬浮及点击时亮度的变化
.hollowBtnHover(@color,@borderWidth:1px){
    &:hover{
        border: @borderWidth solid lighten(@color,5%);
        color: lighten(@color,8%);
    }
    &:active{
        border: @borderWidth solid darken(@color,5%);
        color: darken(@color,2%);
    }
}

//---镂空按钮悬浮及点击时亮度的变化
.hollowBtnHoverByNormal(@color,@borderWidth:1px){
    &:hover{
        background-color: lighten(@color,0%);
        border: @borderWidth solid lighten(@color,0%);
        color: #fff;
    }
    &:active{
        background-color: darken(@color,6%);
        border: @borderWidth solid darken(@color,6%);
        color: #fff;
    }
}

//---正常按钮悬浮及点击时亮度的变化
.btnBgHover(@bgColor){
    &:hover{
        background: lighten(@bgColor,2%);
    }
    &:active{
        background: darken(@bgColor,6%);
    }
}