less
less-base.less文件展示：
1 //清除标签默认样式; 2 .label(){ 3 html {margin: 0; padding: 0; border: 0;_background-image:url(n1othing.txt)} 4 body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } 5 ol, ul, li { list-style: none; } 6 body {line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 12px; color: #333;} 7 table,tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline;} 8 caption, th, td { text-align: left; font-weight: normal; float: none !important; } 9 table, th, td, select, img, input,object{ vertical-align: middle;} 10 :focus { outline: 0;} 11 input,select{margin:0;} 12 a { color: #005EA7; text-decoration: none; } 13 a:hover {color: #C7000B; text-decoration: none; } 14 p,a,td{word-wrap:break-word;word-break:break-all;} 15 img { border: none;vertical-align:top; } 16 textarea{ resize:none;border:1px solid #ccc;} 17 textarea:hover{border-color:#ccc;} 18 input[type="text"],input[type="button"]{-webkit-appearance: none;border-radius: 0;font-family:'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif;} 19 input[type="text"]{border:solid 1px #ccc; border-radius:0;} 20 dfn {font-style: normal;font-family: Arial;} 21 } 22 23 .fl(){ float:left; } //左浮动; 24 .fr(){ float:right;} //右浮动; 25 //设置方向浮动; 26 .float( @dire : left ){ 27 float:@dire; 28 } 29 //清除浮动; 30 .clear(){ 31 *zoom:1; 32 &:after{ 33 content: ""; 34 display: block; 35 height: 0; 36 clear: both; 37 visibility: hidden; 38 overflow: hidden; 39 } 40 } 41 //清右浮动; 42 .clr(){ 43 clear: both; 44 display: block; 45 font-size: 0; 46 height: 0; 47 line-height: 0; 48 overflow: hidden; 49 } 50 51 /** 52 * 循环初始字体大小: 53 * @end : 结束字体大小(数字),必须输; 54 * @begin : 开始字体大小(数字),可以省略; 55 * @un : 字体单位(字符串),可以省略; 56 * 例子 : .base-fonts(28); 57 */ 58 .base-fonts( @end,@begin:12,@un:px) when ( @begin =< @end ) { 59 .f-@{begin}{ 60 font-size:unit(@begin, @un); 61 } 62 .base-fonts( @end,( @begin+2 ),@un ); 63 } 64 65 /** 66 * 循环初始默认样式: 67 * @name : 样式前缀名,必须输; 68 * @style : 设置样式,必须输; 69 * @end : 结束样式,必须输; 70 * @begin : 开始样式,可以省略; 71 * @mult : 循环累加倍数,可以省略; 72 * @un : 字体单位(字符串),可以省略; 73 * 例子 : .base-styles(mb,margin-bottom,30,5); 74 */ 75 .base-styles(@name:name,@style,@end,@begin:5,@mult:5,@un:px ) when ( @begin =< @end ) { 76 .@{name}-@{begin}{ 77 @{style}:unit(@begin, @un); 78 } 79 .base-styles( @name,@style,@end,(@begin+@mult),@mult,@un ); 80 } 81 82 //一行显示。。。。 83 .ellipsis(){ 84 white-space:nowrap; 85 text-overflow:ellipsis; 86 overflow:hidden; 87 } 88 /* 强制折行 */ 89 .break-word(){ 90 word-break:break-all; /*支持IE，chrome，FF不支持*/ 91 word-wrap:break-word; /*支持IE，chrome，FF*/ 92 } 93 94 //设置字体; 95 .f(@size:12,@un:px){font-size:unit(@size, @un); } 96 //设置字体; 97 .fa(@family:'Microsoft Yahei'){ font-family:@family,'宋体','黑体';} 98 .tal(){ text-align: left; } 99 .tar(){ text-align: right; } 100 .tac(){ text-align: center; } 101 .text-align( @dir:left ){text-align: @dir;} 102 .over(){overflow:hidden; } 103 .ofv(){overflow:visible !important;} 104 .hide(){ display:none; } 105 .block(){ display:block; } 106 .abs(){ position: absolute; } 107 .rel(){ position: relative; } 108 .cur(){ cursor: pointer; } 109 .def(){ cursor:default;} 110 111 //css3过渡; 112 .tran(@name:all,@time:2s){ 113 -webkit-transition : @name @time; /* Safari 和 Chrome */ 114 -moz-transition : @name @time; /* Firefox 4 */ 115 -ms-transition : @name @time; /* IE */ 116 -o-transition : @name @time; /* Opera */ 117 transition : @name @time; 118 } 119 120 //css3; 121 .css3( @style,@frames ){ 122 -webkit-@{style} : @frames; /* Safari 和 Chrome */ 123 -moz-@{style} : @frames; /* Firefox 4 */ 124 -ms-@{style} : @frames; /* IE */ 125 -o-@{style} : @frames; /* Opera */ 126 @{style} : @frames; 127 } 128 129 //透明; 130 .opa(@num:0.8){ 131 opacity : @num; 132 filter : ~'alpha(opacity='@num*100~')'; 133 } 134 135 //css3圆角; 136 .border-radius(@radius: 5px) { 137 -webkit-border-radius : @radius; /* Safari 和 Chrome */ 138 -moz-border-radius : @radius; /* Firefox 4 */ 139 -ms-border-radius : @radius; /* IE */ 140 -o-border-radius : @radius; /* Opera */ 141 border-radius : @radius; 142 } 143 144 /** 145 * css3动画,只能写在调用页面,配合.css3( @style,@frames )使用; 146 * 例子 : 147 * .keyframes(starts,{ 148 0% {transform:rotate(0deg)} 149 100%{transform:rotate(360deg)} 150 }); 151 .className{.css3(animation,starts 8s linear infinite .3s );} 152 */ 153 .keyframes(@name, @frames) { 154 @-webkit-keyframes @name { @frames(); } /* Safari 和 Chrome */ 155 @-moz-keyframes @name { @frames(); } /* Firefox 4 */ 156 @-ms-keyframes @name { @frames(); } /* IE */ 157 @-o-keyframes @name { @frames(); } /* Opera */ 158 @keyframes @name { @frames(); } 159 } 160 161 //打包默认样式; 162 .base(@content:950,@unit:px,@orange:#f60,@yellow:#fff000,@blue:#5fb3d2,@red:#ff546a,@gray:#ccc,@disabled:#ccc,@bor_color:#ccc){ 163 .label(); 164 /* 默认浮动 */ 165 .fl{ 166 .fl(); 167 } 168 .fr{ 169 .fr(); 170 } 171 .clear{ 172 .clear(); 173 } 174 /* 显示隐藏 */ 175 .hide{ 176 .hide(); 177 } 178 .show{ 179 .block(); 180 } 181 /* 文本方向 */ 182 .tal{ 183 .tal(); 184 } 185 .tar{ 186 .tar(); 187 } 188 .tac{ 189 .tac(); 190 } 191 /* 截取 */ 192 .over{ 193 .over(); 194 } 195 .ofv{ 196 .ofv(); 197 } 198 /* 定位 */ 199 .abs{ 200 .abs(); 201 } 202 .rel{ 203 .rel(); 204 } 205 /* 鼠标手势 */ 206 .cursor{ 207 .cur(); 208 } 209 .def{ 210 .def(); 211 } 212 /* 。。。。 */ 213 .ellipsis{ 214 .ellipsis(); 215 } 216 /* 强制折行 */ 217 .break-word{ 218 .break-word(); 219 } 220 /* 默认颜色 */ 221 .colr-red{color: @red;} 222 .colr-blue{color: @blue;} 223 .colr-gray{color: @gray;} 224 .colr-yellow{color: @yellow;} 225 .colr-org{color: @orange;} 226 /* 默认背景颜色 */ 227 .bg-red{ background-color: @red;} 228 .bg-blue{background-color: @blue;} 229 .bg-gray{background-color: @gray;} 230 .bg-yellow{background-color: @yellow;} 231 .bg-org{background-color: @orange;} 232 /* 默认置灰 */ 233 .disabled{ background-color:@disabled; } 234 /* 默认字体 */ 235 .base-fonts(32,@un:@unit); 236 /* margin padding */ 237 .mt0 { margin-top: 0 !important; } 238 .base-styles(mt,margin-top,30,5,@un:@unit); 239 .mb0 { margin-bottom: 0 !important; } 240 .base-styles(mb,margin-bottom,30,5,@un:@unit); 241 .ml0 { margin-left: 0 !important; } 242 .base-styles(ml,margin-left,30,5,@un:@unit); 243 .mr0 { margin-right: 0 !important; } 244 .base-styles(mr,margin-right,30,5,@un:@unit); 245 /* 高度 */ 246 .base-styles(blk,height,50,5,@un:@unit); 247 /* 边框 */ 248 .bor_t{ border-top:solid 1px @bor_color;} 249 .bor_l{ border-left:solid 1px @bor_color;} 250 .bor_r{ border-right:solid 1px @bor_color;} 251 .bor_b{ border-bottom:solid 1px @bor_color;} 252 .bor_t0{ border-top:none!important;} 253 .bor_l0{ border-left:none!important;} 254 .bor_r0{ border-right:none!important;} 255 .bor_b0{ border-bottom:none!important;} 256 .bor_das{ border:1px dashed @bor_color;} 257 .bor_dot{ border:1px dotted @bor_color;} 258 .border{ border:1px solid @bor_color;} 259 /* box */ 260 .content{ width: unit(@content,@unit); margin:0 auto; } 261 }
应用 index.less:
1 //引入底层库; 2 @import (reference) "less-base.less"; 3 4 //默认初始化; 5 .base(@content:1000); 6 7 /*方法*/ 8 .f12{ 9 .f(12); 10 } 11 12 /*css3透明*/ 13 .opa8{ 14 .opa(0.8); 15 } 16 17 /*css3圆角*/ 18 .border-radius{ 19 .border-radius(5px); 20 } 21 22 /*css3过渡*/ 23 .transitions{ 24 .tran(); 25 } 26 27 /*css3旋转*/ 28 .rotate60{ 29 .css3(transform,rotate(60deg)); 30 } 31 32 /* keyframes 必须放在引用页面调用 */ 33 .keyframes(@name, @frames) { 34 @-webkit-keyframes @name { @frames(); } 35 @-moz-keyframes @name { @frames(); } 36 @-ms-keyframes @name { @frames(); } 37 @-o-keyframes @name { @frames(); } 38 @keyframes @name { @frames(); } 39 } 40 41 /*旋转keyframes*/ 42 .keyframes(rotates,{ 43 0% {transform:rotate(0deg)} 44 100%{transform:rotate(360deg)} 45 }); 46 47 /*引用旋转keyframes*/ 48 .keyframes-rotates{ .css3(animation,starts 8s linear infinite .3s ); }