Base

1.[]表示非必须参数
2.调用空参数函数时不需要写括号。
3.调用函数时,后面的分号不可缺省。

.fz(@font-size,[@line-height],[@height])字体大小、行高、高度

定义字体大小与行高和高度。


		.test{.fz(12px);} 		//font-size:12px;
		.test{.fz(12px,20px);} 	//font-size:12px;line-height:20px;
		.test{.fz(12px,20px,40px);} //font-size:12px;line-height:20px;height:40px;
	

.lh(@line-height)字体行高

定义字体行高。


		.test{.lh(2);}       //line-height:2;
	

.lhh(@line-height,[@height]:@line-height)字体行高与容器高度(相等)

定义字体行高与容器高度。行高此处不能定义为乘积因子。


		.test{.lhh(24px);}       //line-height:24px;height:24px; (行高与高度相等)
		.test{.lhh(24px,20px);}      //line-height:24px;height:20px; (高度与行高不相等时,特殊处理时)
	

.bold([@bold])粗体

字体表现为粗体。


		.test{.bold;}       //font-weight:bold;
		.test{.bold(900);}  //font-weight:900;
	

.italic斜体

字体表现为斜体。


		.test{.italic;}         //font-style:italic;
	

.smooth平滑

字体或字体图标平滑,减少锯齿。


		.test{.smooth;}         //-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
	

.normal正常字体

去除从长辈元素继承的粗体与斜体样式。


		.test{.normal;}         //font-style:normal;font-weight:normal;
	

.color(@color,[@acolor],[@hovercolor])字体颜色

定义字体,链接颜色,链接悬浮颜色。


		.test{.color(#0cf);}             //color:#0cf; (自身颜色,可作用与a或非a)
		.test{.color(#0cf,#f39);}           //color:#0cf;&:hover{color:#f39;} (自身颜色+hover时颜色,主要作用于a)
		.test{.color(#0cf,#f39,#93f);}    //color:#0cf;a{color:#f39;}a:hover{color:#93f;} (默认文本颜色+链接颜色+链接hover颜色,作用有a标签的元素)
	

.tip(@property,@value)定义placeholder样式

设置placeholder占位提醒字符的指定样式。


		.test{.tip(font-family,'Verdana');}         //定义占位符使用Verdana字体
	

.tips(@font-size,@color,[@text-align:left])定义placeholder样式

设置placeholder占位提醒字符样式。默认函数接受3个传值,分别为字体大小、字体颜色、对齐方式,对齐方式默认为左可缺省。


		.test{.tip(12px,#999);}         //占位符12px,颜色#999
		.test{.tip(12px,#999,right);}       //占位符12px,颜色#999,在右侧
	

.break([]/@lines,[@height])文本折行或多行省略

无参数时,遇到文本溢出容器时,总是进行断词折行;有参数时,当段落文字超出指定行数时,显示为“...”来省略(仅webkit有效)参数传入指定行数,第2个参数可选,指定高度用于兼容其它浏览器作为直接截断隐藏。


		.test{.break;}      	//当文本遇到标点符号或长单词在行尾时,依旧断词折行
		.test{.break(2);}   	//当超过2行时,2行末尾处文本显示为“...”来省略
		.test{.break(2,60px);}  //同上,且指定高度,让其兼容如Firefox等其它浏览器
	

.nobreak([]/clip/visible)禁止文本折行

遇到文本溢出容器时,禁止折行。


		.test{.nobreak;}        //当不传入参数时,相当于ellipsis,溢出文本处由“...”替换
		.test{.nobreak(clip);}      //当溢出文本,直接对文本进行剪裁
		.test{.nobreak(visible);}   //总是显示溢出的部分
	

.indent(@indent)文本缩进

应用于常见的“以图换字”,可应用于按钮、banner等位置背景图,保留文字作SEO优化,但将文字缩进为不可见,不建议传入过大的值增加移动端重绘能耗。


		.test{.indent;}             //参数缺省时等价于text-indent:-200%;overflow:hidden;
		.test{.indent(-500%);}
	

.retext(x/y)文字排版

.retext(x)牌匾从右至左水平单行排版效果;.retext(y)文笺从右至左、从上至下排版效果。


		.test{.retext(x);}      //{direction:rtl;unicode-bidi:bidi-override;}
		.test{.retext(y);}      //{writing-mode:tb-rl;writing-mode:vertical-rl;}
	

.x(@text-align)水平x轴对齐方式

文本对齐方式,对应传入text-align的值,参数缺省时默认值为center。


		.test{.x;}          //text-align:center;
		.test{.x(left);}        //text-align:left;
		.test{.x(right);}       //text-align:right;
	

.y(@vertical-align)垂直y轴对齐方式

垂直对齐方式,对应传入vertical-align的值,参数缺省时默认值为middle。


		.test{.y;}          //vertical-align:middle;
		.test{.y(top);}         //vertical-align:top;
		.test{.y(-3px);}        //vertical-align:-3px;
	

.z(@z-index)三维z轴层叠空间

纵轴级别值,对应传入z-index的值,参数缺省时默认值为1。


		.test{.z(100);}         //z-index:100;
		.test{.z(-1);}      //z-index:-1;
	

.w(@width)宽度

设置元素宽度。


		.test{.w(100px);}       //width:100px;
	

.h(@height)高度

设置元素高度。


		.test{.h(100px);}       //height:100px;
	

.size(@width,[@height])尺寸

设置元素宽度与高度,高度缺省时则与宽度相等。


		.test{.size(100px);}        //width:100px;height:100px;
		.test{.size(100px,200px);}  //width:100px;height:200px;
	

.full([x|y])满宽/高

设置元素满宽或满高,或二者皆100%。


		.test{.full;}       //width:100%;height:100%;
		.test{.full(x);}    //width:100%;
		.test{.full(y);}    //height:100%;
	

.min-width(@min-width)最小宽度

设置最小宽度。


		.test{.min-width(200px);}   //min-width:200px;_width:200px;
	

.min-height(@min-height)最小高度

设置最小高度。


		.test{.min-height(200px);}  //min-height:200px;_height:200px;
	

.db表现为块级元素

display:block简写。

.dbi表现为内联块级元素

display:inline-block简写。也可以写作.dib;

.di表现为内联元素

display:inline简写。

.none元素不可见(移除占位)

display:none简写。你也可以直接在元素上添加该类名。

.hide元素隐藏(不移除占位)

visibility:hidden简写。你也可以直接在元素上添加该类名。

.show元素显示

visibility:visible简写。你也可以直接在元素上添加该类名。

.clip溢出隐藏

overflow:hidden;*zoom:1;你也可以直接在元素上添加该类名。

.noclip溢出显示

overflow:visible;

.fl左浮动

ie6-7 双倍margin hack。你也可以直接在元素上添加该类名。


		.test{.fl;}     //float:left;*display:inline;
	

.fr右浮动

ie6-7 双倍margin hack。你也可以直接在元素上添加该类名。


		.test{.fl;}     //float:right;*display:inline;
	

.clear([both]/left/right)清除浮动

参数缺省时等价于clear:both;

.clearfix闭合浮动塌陷

应用在闭合浮动元素的父级元素上,当浮动元素父级有BFC时无需设置。你也可以直接在元素上添加该类名。


		.test{.clearfix;}   
		//.test{*zoom:1;}
		//.test:after{content:"\200B";display:block;height:0;clear:both;}
	

.fbox()单侧浮动自适应布局

当一侧固定浮动(非固定尺寸),另一侧自适应时可定义此类


		.sidebar{.fl;}         //float:left;
		.content{.fbox;}   	//display:table-cell;width:5000px;*display:inline-block;*width:auto;
	

.flist([@inner,@item],@item-spacing)浮动阵列布局

假设一个浮动阵列布局的结构为div.$outer > ul.$inner > li.$item,将函数应用于$outer外层元素上,让所有$item全部浮动,并由$inner内层包裹层闭合浮动,且$outer外层元素隐藏溢出,即可创建一个完全居中的浮动阵列布局。

当不指定内层与单元元素的class名时,默认作为div>ul>li结构处理。如其它情况或元素可指定一个class名。


		.videobox{
			.flist(20px);
		}
		//编译后生成
		.videobox{
			//默认遮盖溢出显示
			.clip;*position:relative;
			ul{
			    //浮动闭合
			    .clearfix;
			    margin-right:-20px;
			    li{
			        //IE6-7必须控制溢出
			        *overflow:hidden;
			        //每个单元浮动
			        .fl;
			        //单元宽度与间距
			        margin-right:20px;
			        margin-bottom:20px;
			    }
			}   
		}
		.imagebox{
			.flist(gallery,pic,10px);
		}
		//编译后将上例中的ul替换为.gallery,li替换为.pic。
	

.iblock([]/@inner)inline-block布局替代浮动布局

不允许折行,进行容器水平排列,默认函数应用在ul上,子对象为li。也可以传入一个子选择器类。


		.test{.iblock;}         //.test > li 
		.test{.iblock(loop);}   //.test > .loop
		/*
		font-size:0;white-space:nowrap;overflow:visible;
		li{.dbi;.y(top);font-size:1rem;white-space:normal;}
		*/
	

.cols(@width,[@count],[@gap])多列

快速多列布局,第2和第3个参数非必须


		.test{.cols(200px,5,20px);}         //固定5列,每列宽度200px,间距20px
		.test{.cols(200px,3);}          //固定3列,每列200px,宽度使用浏览器默认
		.test{.cols(200px);}            //固定每列200px,列数浏览器根据容器宽度自动分配
	

.ps默认定位

position:static;简写

.pr相对定位

position:relative;*zoom:1;简写

.pa绝对定位

position:absolute;简写

.pf窗口定位

position:fixed;简写

.po复位

.ps;margin:0;复位绝对定位发生的位移。

.lt(@l,@t)左上角

配合定位书写定位的位置,传入两个参数,当第2个参数缺省时,则与第一个参数一致。均为先传入水平方向,后传入垂直方向。


		.test{.lt(10px,20px);}  //left:10px;top:20px;
		.test{.lt(15px);}       //left:15px;top:15px;
	

.rt(@r,@t)右上角

.lb(@l,@b)左下角

.rb(@r,@b)右下角

.auto(x/y/o)居中对齐

传入x水平居中对齐,传入y垂直居中对齐,传入x中央居中对齐


		.test{.auto(x);}    //margin-left:auto;margin-right:auto; 作用于自身
		.test{.auto(y);}    //display:table-cell;vertical-align:middle; 作用于自身内部元素
		.test{.auto(o);}    //display:table-cell;vertical-align:middle;text-align:center;	//如内部元素设为display:block,则需自行设置.auto(x)
	

.mid(x/y,@edge | o,@edgeX,@edgeY:@edgeX)居中对齐

绝对定位实现居中定位。传入x水平居中对齐,传入y垂直居中对齐,传入o居中对齐。edge以设置边距。不支持IE6,用于元素尺寸不能确定时。


		//IE6支持,需传入元素尺寸
		.test{.mid(o,20px,10px);}  	//居中,距水平边缘20px,距垂直边缘10px
		.test{.mid(x,20px);}        //水平居中,距水平边缘各20px
		.test{.mid(y,10px);}        //垂直居中,距垂直边缘各10px
	

.ct(x/y,@size,[@fix] | o,@width,@height:@width,[@fix])居中对齐

传入x水平居中对齐,传入y垂直居中对齐,传入o居中对齐。可传入一个修订偏移参数,以修改margin值。
3.3版本开始废弃对旧版本的兼容


		//IE6支持,需传入元素尺寸
		.test{.ct(o,220px,110px);}  //居中,高度不传值时则等于宽度
		.test{.ct(x,220px);}        //水平居中
		.test{.ct(y,110px);}        //垂直居中
		//新增偏移修订(v3.3+)
		.test{.ct(o,220px,110px,10px,-10px);}  //修订水平向右10px,修订垂直向上10px
		.test{.ct(x,220px,-20px);}       //修订水平向左偏移20px
		.test{.ct(y,110px,20px);}        //修订垂直向下20px
	

.fix(x|y|o,@edge)窗口定位(不兼容IE6)

第一个参数必须传入方位,并传入边距值,自动拉伸。


		.test{.fix(x,10px);}    //窗口水平居中,边距10px
		.test{.fix(y,20px);}   	//窗口垂直中间,边距20px
		.test{.fix(o,30px);}   	//窗口正中间,边距30px
	

.fixed(@direction,@x,@y)/(o,@width,@height)/(x|y,@edge)窗口定位(含部分IE6兼容)

参数先水平,后垂直,第一个参数必须传入方位,当为正中间时则传入o,并传入元素的宽高。(是否传入单位均可,但都会转化为像素)


		.test{.fixed(lt,10px,20px);}        //窗口定位左上角,距左10px,距上20px
		.test{.fixed(o,400px,300px);}   //窗口正中间
		.test{.fixed(x,200px);}   	//窗口水平中间
	

.hasfixed页面有固定定位时

当页面有固定定位元素时,在less顶级运行该函数,防止滚动闪动,比如目前的公共头(公共头中已经设置,相关页面无需再设置)

.islocked禁止页面滚动

添加在html元素上,以禁止浏览器进行滚动

.gradient([l/r/t/b/o],@color-start,@color-stop)渐变

简单快速地生成一个双色渐变,l渐变从右至左,r渐变从左至右,t渐变从下至上,b渐变从上至下,o渐变从中心至外圈


		.test{.gradient(r,#fff,#000);}      //生成一个水平从左向右的从白色过渡到黑色的渐变图像
		.test{.gradient(o,#fff,#000);}      //生成一个径向从内向外的从白色过渡到黑色的渐变图像
	

.sprite(@n,@unit-width)雪碧图

快速生成雪碧图位置。雪碧图不宜过大,建议将相关的放置在一起即可。
雪碧图制图时请使用横向阵列,此函数仅用于等宽子图时情景。
参数说明:第一个参数传入所含子元素个数,第二个参数传入每个子元素的宽度。
当不传入第3个参数时默认指定class为sprite-n,否则为classname-n。


		//假设html部分如下
		ul.test > (li.sprite-$)*12
		//使用方法:定义公共雪碧图,公共class,调用函数
		.test{
			li{background:url('@{__img}sprite.png') no-repeat;}
			.sprite(12,65px); //不指定class
			.sprite(12,65px,unit); //指定class
		}       
		//生成内容:
		.test{
			//不指定class时
			.sprite-1{background-position:0 0;}
			.sprite-2{background-position:-65px 0;}
			...
			//指定class时
			.unit-1{background-position:0 0;}
			.unit-2{background-position:-65px 0;}
			...
		}   
	

效果演示

.tm(@alpha)透明度

元素透明度,子元素均会受影响,取值0-1.


		.test{.tm(0.5);}            //opacity:0.5;filter:alpha(opacity=50);
	

.tb(@r,@g,@b,@alpha)半透明背景

带aplha通道的颜色,此处函数只是应用于背景,快速书写半透明背景等,即属性是被指定的,传入参数rgb三通道数值与0-1取值的透明度。
1.注意:如果有background简写,它应该要写在简写之后。
2.IE6默认兼容的是纯色,如需要更换替代色,请复写。
注意移除IE9的filter,防止IE9滤镜重叠导致的加深效果。


		.test{.tb(0,0,0,0.5);}      //50%透明度的黑色背景,IE6表现为纯黑色
		//background-color:rgba(0,0,0,0.5);
		//filter:~"progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#80000000, endColorstr=#80000000) \9";
		//_background-color:rgb(0,0,0);
	

.blur(@blur)模糊滤镜

传入模糊半径


		.test{.blur(5px);}      //filter:blur(5px);filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5px');*zoom: 1;
	

.r(@radius)圆角


		.test{.r(5px);}         //border-radius:5px;
	

.pointer手形指针

cursor:pointer;简写

.tsfix三维闪动bug处理


		.test{.tsfix;}      //-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;
	

.iconfont图标字体

*需提前自行设置iconfont字体的fontface。

字体图标目前有两种引入形式,一种为html内的unicode码(以下简称“实体形式”),一种为在伪元素中引用(以下简称“伪元素形式”)。

1.当必须保证IE6-7的兼容性和可见性时,使用实体形式。

2.当可以不用考虑IE6-7的可见性或影响不大时(即只是字符前图标非单个图标),使用伪元素形式。

你也可以直接在元素上添加该类名


		\e600  伪元素形式
		> 实体形式
	

实体方式

在HTML写入对应实体,添加.iconfont类。

<i class="iconfont">&#xe600; 立刻下载</span>