1.[]表示非必须参数
2.调用空参数函数时不需要写括号。
3.调用函数时,后面的分号不可缺省。
定义字体大小与行高和高度。
.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;
定义字体行高。
.test{.lh(2);} //line-height:2;
定义字体行高与容器高度。行高此处不能定义为乘积因子。
.test{.lhh(24px);} //line-height:24px;height:24px; (行高与高度相等)
.test{.lhh(24px,20px);} //line-height:24px;height:20px; (高度与行高不相等时,特殊处理时)
字体表现为粗体。
.test{.bold;} //font-weight:bold;
.test{.bold(900);} //font-weight:900;
字体表现为斜体。
.test{.italic;} //font-style:italic;
字体或字体图标平滑,减少锯齿。
.test{.smooth;} //-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
去除从长辈元素继承的粗体与斜体样式。
.test{.normal;} //font-style:normal;font-weight:normal;
定义字体,链接颜色,链接悬浮颜色。
.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标签的元素)
设置placeholder占位提醒字符的指定样式。
.test{.tip(font-family,'Verdana');} //定义占位符使用Verdana字体
设置placeholder占位提醒字符样式。默认函数接受3个传值,分别为字体大小、字体颜色、对齐方式,对齐方式默认为左可缺省。
.test{.tip(12px,#999);} //占位符12px,颜色#999
.test{.tip(12px,#999,right);} //占位符12px,颜色#999,在右侧
无参数时,遇到文本溢出容器时,总是进行断词折行;有参数时,当段落文字超出指定行数时,显示为“...”来省略(仅webkit有效)参数传入指定行数,第2个参数可选,指定高度用于兼容其它浏览器作为直接截断隐藏。
.test{.break;} //当文本遇到标点符号或长单词在行尾时,依旧断词折行
.test{.break(2);} //当超过2行时,2行末尾处文本显示为“...”来省略
.test{.break(2,60px);} //同上,且指定高度,让其兼容如Firefox等其它浏览器
遇到文本溢出容器时,禁止折行。
.test{.nobreak;} //当不传入参数时,相当于ellipsis,溢出文本处由“...”替换
.test{.nobreak(clip);} //当溢出文本,直接对文本进行剪裁
.test{.nobreak(visible);} //总是显示溢出的部分
应用于常见的“以图换字”,可应用于按钮、banner等位置背景图,保留文字作SEO优化,但将文字缩进为不可见,不建议传入过大的值增加移动端重绘能耗。
.test{.indent;} //参数缺省时等价于text-indent:-200%;overflow:hidden;
.test{.indent(-500%);}
.retext(x)牌匾从右至左水平单行排版效果;.retext(y)文笺从右至左、从上至下排版效果。
.test{.retext(x);} //{direction:rtl;unicode-bidi:bidi-override;}
.test{.retext(y);} //{writing-mode:tb-rl;writing-mode:vertical-rl;}
文本对齐方式,对应传入text-align的值,参数缺省时默认值为center。
.test{.x;} //text-align:center;
.test{.x(left);} //text-align:left;
.test{.x(right);} //text-align:right;
垂直对齐方式,对应传入vertical-align的值,参数缺省时默认值为middle。
.test{.y;} //vertical-align:middle;
.test{.y(top);} //vertical-align:top;
.test{.y(-3px);} //vertical-align:-3px;
纵轴级别值,对应传入z-index的值,参数缺省时默认值为1。
.test{.z(100);} //z-index:100;
.test{.z(-1);} //z-index:-1;
设置元素宽度。
.test{.w(100px);} //width:100px;
设置元素高度。
.test{.h(100px);} //height:100px;
设置元素宽度与高度,高度缺省时则与宽度相等。
.test{.size(100px);} //width:100px;height:100px;
.test{.size(100px,200px);} //width:100px;height:200px;
设置元素满宽或满高,或二者皆100%。
.test{.full;} //width:100%;height:100%;
.test{.full(x);} //width:100%;
.test{.full(y);} //height:100%;
设置最小宽度。
.test{.min-width(200px);} //min-width:200px;_width:200px;
设置最小高度。
.test{.min-height(200px);} //min-height:200px;_height:200px;
display:block简写。
display:inline-block简写。也可以写作.dib;
display:inline简写。
display:none简写。你也可以直接在元素上添加该类名。
visibility:hidden简写。你也可以直接在元素上添加该类名。
visibility:visible简写。你也可以直接在元素上添加该类名。
overflow:hidden;*zoom:1;你也可以直接在元素上添加该类名。
overflow:visible;
ie6-7 双倍margin hack。你也可以直接在元素上添加该类名。
.test{.fl;} //float:left;*display:inline;
ie6-7 双倍margin hack。你也可以直接在元素上添加该类名。
.test{.fl;} //float:right;*display:inline;
参数缺省时等价于clear:both;
应用在闭合浮动元素的父级元素上,当浮动元素父级有BFC时无需设置。你也可以直接在元素上添加该类名。
.test{.clearfix;}
//.test{*zoom:1;}
//.test:after{content:"\200B";display:block;height:0;clear:both;}
当一侧固定浮动(非固定尺寸),另一侧自适应时可定义此类
.sidebar{.fl;} //float:left;
.content{.fbox;} //display:table-cell;width:5000px;*display:inline-block;*width:auto;
假设一个浮动阵列布局的结构为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。
不允许折行,进行容器水平排列,默认函数应用在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;}
*/
快速多列布局,第2和第3个参数非必须
.test{.cols(200px,5,20px);} //固定5列,每列宽度200px,间距20px
.test{.cols(200px,3);} //固定3列,每列200px,宽度使用浏览器默认
.test{.cols(200px);} //固定每列200px,列数浏览器根据容器宽度自动分配
position:static;简写
position:relative;*zoom:1;简写
position:absolute;简写
position:fixed;简写
.ps;margin:0;复位绝对定位发生的位移。
配合定位书写定位的位置,传入两个参数,当第2个参数缺省时,则与第一个参数一致。均为先传入水平方向,后传入垂直方向。
.test{.lt(10px,20px);} //left:10px;top:20px;
.test{.lt(15px);} //left:15px;top:15px;
传入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)
绝对定位实现居中定位。传入x水平居中对齐,传入y垂直居中对齐,传入o居中对齐。edge以设置边距。不支持IE6,用于元素尺寸不能确定时。
//IE6支持,需传入元素尺寸
.test{.mid(o,20px,10px);} //居中,距水平边缘20px,距垂直边缘10px
.test{.mid(x,20px);} //水平居中,距水平边缘各20px
.test{.mid(y,10px);} //垂直居中,距垂直边缘各10px
传入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
第一个参数必须传入方位,并传入边距值,自动拉伸。
.test{.fix(x,10px);} //窗口水平居中,边距10px
.test{.fix(y,20px);} //窗口垂直中间,边距20px
.test{.fix(o,30px);} //窗口正中间,边距30px
参数先水平,后垂直,第一个参数必须传入方位,当为正中间时则传入o,并传入元素的宽高。(是否传入单位均可,但都会转化为像素)
.test{.fixed(lt,10px,20px);} //窗口定位左上角,距左10px,距上20px
.test{.fixed(o,400px,300px);} //窗口正中间
.test{.fixed(x,200px);} //窗口水平中间
当页面有固定定位元素时,在less顶级运行该函数,防止滚动闪动,比如目前的公共头(公共头中已经设置,相关页面无需再设置)
添加在html元素上,以禁止浏览器进行滚动
简单快速地生成一个双色渐变,l渐变从右至左,r渐变从左至右,t渐变从下至上,b渐变从上至下,o渐变从中心至外圈
.test{.gradient(r,#fff,#000);} //生成一个水平从左向右的从白色过渡到黑色的渐变图像
.test{.gradient(o,#fff,#000);} //生成一个径向从内向外的从白色过渡到黑色的渐变图像
快速生成雪碧图位置。雪碧图不宜过大,建议将相关的放置在一起即可。
雪碧图制图时请使用横向阵列,此函数仅用于等宽子图时情景。
参数说明:第一个参数传入所含子元素个数,第二个参数传入每个子元素的宽度。
当不传入第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;}
...
}
元素透明度,子元素均会受影响,取值0-1.
.test{.tm(0.5);} //opacity:0.5;filter:alpha(opacity=50);
带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);
传入模糊半径
.test{.blur(5px);} //filter:blur(5px);filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5px');*zoom: 1;
.test{.r(5px);} //border-radius:5px;
cursor:pointer;简写
.test{.tsfix;} //-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;
*需提前自行设置iconfont字体的fontface。
字体图标目前有两种引入形式,一种为html内的unicode码(以下简称“实体形式”),一种为在伪元素中引用(以下简称“伪元素形式”)。
1.当必须保证IE6-7的兼容性和可见性时,使用实体形式。
2.当可以不用考虑IE6-7的可见性或影响不大时(即只是字符前图标非单个图标),使用伪元素形式。
你也可以直接在元素上添加该类名
\e600 伪元素形式
> 实体形式
在HTML写入对应实体,添加.iconfont类。
<i class="iconfont"> 立刻下载</span>