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 [email protected]{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 [email protected]{name}[email protected]{begin}{
77 @{style}:unit(@begin, @un);
78 }
79 .base-styles( @name,@style,@end,(@[email protected]),@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 [email protected]{style} : @frames; /* Safari 和 Chrome */
123 [email protected]{style} : @frames; /* Firefox 4 */
124 [email protected]{style} : @frames; /* IE */
125 [email protected]{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 ); }
最后生成的css:
1 html {
2 margin: 0;
3 padding: 0;
4 border: 0;
5 _background-image: url(n1othing.txt);
6 }
7 body,
8 div,
9 span,
10 object,
11 iframe,
12 h1,
13 h2,
14 h3,
15 h4,
16 h5,
17 h6,
18 p,
19 blockquote,
20 pre,
21 a,
22 abbr,
23 acronym,
24 address,
25 code,
26 del,
27 dfn,
28 em,
29 img,
30 q,
31 dl,
32 dt,
33 dd,
34 ol,
35 ul,
36 li,
37 fieldset,
38 form,
39 label,
40 legend,
41 caption,
42 tbody,
43 tfoot,
44 thead,
45 article,
46 aside,
47 dialog,
48 figure,
49 footer,
50 header,
51 hgroup,
52 nav,
53 section {
54 margin: 0;
55 padding: 0;
56 border: 0;
57 font-size: 100%;
58 vertical-align: baseline;
59 }
60 ol,
61 ul,
62 li {
63 list-style: none;
64 }
65 body {
66 line-height: 1.5;
67 background: white;
68 font-family: ‘Microsoft Yahei‘, Arial, Helvetica, sans-serif;
69 font-size: 12px;
70 color: #333;
71 }
72 table,
73 tr,
74 th,
75 td {
76 border-collapse: collapse;
77 margin: 0;
78 padding: 0;
79 font-size: 100%;
80 vertical-align: baseline;
81 }
82 caption,
83 th,
84 td {
85 text-align: left;
86 font-weight: normal;
87 float: none !important;
88 }
89 table,
90 th,
91 td,
92 select,
93 img,
94 input,
95 object {
96 vertical-align: middle;
97 }
98 :focus {
99 outline: 0;
100 }
101 input,
102 select {
103 margin: 0;
104 }
105 a {
106 color: #005EA7;
107 text-decoration: none;
108 }
109 a:hover {
110 color: #C7000B;
111 text-decoration: none;
112 }
113 p,
114 a,
115 td {
116 word-wrap: break-word;
117 word-break: break-all;
118 }
119 img {
120 border: none;
121 vertical-align: top;
122 }
123 textarea {
124 resize: none;
125 border: 1px solid #ccc;
126 }
127 textarea:hover {
128 border-color: #ccc;
129 }
130 input[type="text"],
131 input[type="button"] {
132 -webkit-appearance: none;
133 border-radius: 0;
134 font-family: ‘Microsoft Yahei‘, ‘黑体‘, Arial, Helvetica, sans-serif;
135 }
136 input[type="text"] {
137 border: solid 1px #ccc;
138 border-radius: 0;
139 }
140 dfn {
141 font-style: normal;
142 font-family: Arial;
143 }
144 /* 默认浮动 */
145 .fl {
146 float: left;
147 }
148 .fr {
149 float: right;
150 }
151 .clear {
152 *zoom: 1;
153 }
154 /* 显示隐藏 */
155 .hide {
156 display: none;
157 }
158 .show {
159 display: block;
160 }
161 /* 文本方向 */
162 .tal {
163 text-align: left;
164 }
165 .tar {
166 text-align: right;
167 }
168 .tac {
169 text-align: center;
170 }
171 /* 截取 */
172 .over {
173 overflow: hidden;
174 }
175 .ofv {
176 overflow: visible !important;
177 }
178 /* 定位 */
179 .abs {
180 position: absolute;
181 }
182 .rel {
183 position: relative;
184 }
185 /* 鼠标手势 */
186 .cursor {
187 cursor: pointer;
188 }
189 .def {
190 cursor: default;
191 }
192 /* 。。。。 */
193 .ellipsis {
194 white-space: nowrap;
195 text-overflow: ellipsis;
196 overflow: hidden;
197 }
198 /* 强制折行 */
199 .break-word {
200 word-break: break-all;
201 word-wrap: break-word;
202 }
203 /* 默认颜色 */
204 .colr-red {
205 color: #ff546a;
206 }
207 .colr-blue {
208 color: #5fb3d2;
209 }
210 .colr-gray {
211 color: #cccccc;
212 }
213 .colr-yellow {
214 color: #fff000;
215 }
216 .colr-org {
217 color: #ff6600;
218 }
219 /* 默认背景颜色 */
220 .bg-red {
221 background-color: #ff546a;
222 }
223 .bg-blue {
224 background-color: #5fb3d2;
225 }
226 .bg-gray {
227 background-color: #cccccc;
228 }
229 .bg-yellow {
230 background-color: #fff000;
231 }
232 .bg-org {
233 background-color: #ff6600;
234 }
235 /* 默认置灰 */
236 .disabled {
237 background-color: #cccccc;
238 }
239 /* 默认字体 */
240 .f-12 {
241 font-size: 12px;
242 }
243 .f-14 {
244 font-size: 14px;
245 }
246 .f-16 {
247 font-size: 16px;
248 }
249 .f-18 {
250 font-size: 18px;
251 }
252 .f-20 {
253 font-size: 20px;
254 }
255 .f-22 {
256 font-size: 22px;
257 }
258 .f-24 {
259 font-size: 24px;
260 }
261 .f-26 {
262 font-size: 26px;
263 }
264 .f-28 {
265 font-size: 28px;
266 }
267 .f-30 {
268 font-size: 30px;
269 }
270 .f-32 {
271 font-size: 32px;
272 }
273 /* margin padding */
274 .mt0 {
275 margin-top: 0 !important;
276 }
277 .mt-5 {
278 margin-top: 5px;
279 }
280 .mt-10 {
281 margin-top: 10px;
282 }
283 .mt-15 {
284 margin-top: 15px;
285 }
286 .mt-20 {
287 margin-top: 20px;
288 }
289 .mt-25 {
290 margin-top: 25px;
291 }
292 .mt-30 {
293 margin-top: 30px;
294 }
295 .mb0 {
296 margin-bottom: 0 !important;
297 }
298 .mb-5 {
299 margin-bottom: 5px;
300 }
301 .mb-10 {
302 margin-bottom: 10px;
303 }
304 .mb-15 {
305 margin-bottom: 15px;
306 }
307 .mb-20 {
308 margin-bottom: 20px;
309 }
310 .mb-25 {
311 margin-bottom: 25px;
312 }
313 .mb-30 {
314 margin-bottom: 30px;
315 }
316 .ml0 {
317 margin-left: 0 !important;
318 }
319 .ml-5 {
320 margin-left: 5px;
321 }
322 .ml-10 {
323 margin-left: 10px;
324 }
325 .ml-15 {
326 margin-left: 15px;
327 }
328 .ml-20 {
329 margin-left: 20px;
330 }
331 .ml-25 {
332 margin-left: 25px;
333 }
334 .ml-30 {
335 margin-left: 30px;
336 }
337 .mr0 {
338 margin-right: 0 !important;
339 }
340 .mr-5 {
341 margin-right: 5px;
342 }
343 .mr-10 {
344 margin-right: 10px;
345 }
346 .mr-15 {
347 margin-right: 15px;
348 }
349 .mr-20 {
350 margin-right: 20px;
351 }
352 .mr-25 {
353 margin-right: 25px;
354 }
355 .mr-30 {
356 margin-right: 30px;
357 }
358 /* 高度 */
359 .blk-5 {
360 height: 5px;
361 }
362 .blk-10 {
363 height: 10px;
364 }
365 .blk-15 {
366 height: 15px;
367 }
368 .blk-20 {
369 height: 20px;
370 }
371 .blk-25 {
372 height: 25px;
373 }
374 .blk-30 {
375 height: 30px;
376 }
377 .blk-35 {
378 height: 35px;
379 }
380 .blk-40 {
381 height: 40px;
382 }
383 .blk-45 {
384 height: 45px;
385 }
386 .blk-50 {
387 height: 50px;
388 }
389 /* 边框 */
390 .bor_t {
391 border-top: solid 1px #cccccc;
392 }
393 .bor_l {
394 border-left: solid 1px #cccccc;
395 }
396 .bor_r {
397 border-right: solid 1px #cccccc;
398 }
399 .bor_b {
400 border-bottom: solid 1px #cccccc;
401 }
402 .bor_t0 {
403 border-top: none!important;
404 }
405 .bor_l0 {
406 border-left: none!important;
407 }
408 .bor_r0 {
409 border-right: none!important;
410 }
411 .bor_b0 {
412 border-bottom: none!important;
413 }
414 .bor_das {
415 border: 1px dashed #cccccc;
416 }
417 .bor_dot {
418 border: 1px dotted #cccccc;
419 }
420 .border {
421 border: 1px solid #cccccc;
422 }
423 /* box */
424 .content {
425 width: 1000px;
426 margin: 0 auto;
427 }
428 /*方法*/
429 .f12 {
430 font-size: 12px;
431 }
432 /*css3透明*/
433 .opa8 {
434 opacity: 0.8;
435 filter: alpha(opacity= 80 );
436 }
437 /*css3圆角*/
438 .border-radius {
439 -webkit-border-radius: 5px;
440 /* Safari 和 Chrome */
441 -moz-border-radius: 5px;
442 /* Firefox 4 */
443 -ms-border-radius: 5px;
444 /* IE */
445 -o-border-radius: 5px;
446 /* Opera */
447 border-radius: 5px;
448 }
449 /*css3过渡*/
450 .transitions {
451 -webkit-transition: all 2s;
452 /* Safari 和 Chrome */
453 -moz-transition: all 2s;
454 /* Firefox 4 */
455 -ms-transition: all 2s;
456 /* IE */
457 -o-transition: all 2s;
458 /* Opera */
459 transition: all 2s;
460 }
461 /*css3旋转*/
462 .rotate60 {
463 -webkit-transform: rotate(60deg);
464 /* Safari 和 Chrome */
465 -moz-transform: rotate(60deg);
466 /* Firefox 4 */
467 -ms-transform: rotate(60deg);
468 /* IE */
469 -o-transform: rotate(60deg);
470 /* Opera */
471 transform: rotate(60deg);
472 }
473 /* keyframes 必须放在引用页面调用 */
474 /*旋转*/
475 /* Safari 和 Chrome */
476 /* Firefox 4 */
477 /* IE */
478 /* Opera */
479 @-webkit-keyframes rotates {
480 0% {
481 transform: rotate(0deg);
482 }
483 100% {
484 transform: rotate(360deg);
485 }
486 }
487 @-moz-keyframes rotates {
488 0% {
489 transform: rotate(0deg);
490 }
491 100% {
492 transform: rotate(360deg);
493 }
494 }
495 @-ms-keyframes rotates {
496 0% {
497 transform: rotate(0deg);
498 }
499 100% {
500 transform: rotate(360deg);
501 }
502 }
503 @-o-keyframes rotates {
504 0% {
505 transform: rotate(0deg);
506 }
507 100% {
508 transform: rotate(360deg);
509 }
510 }
511 @keyframes rotates {
512 0% {
513 transform: rotate(0deg);
514 }
515 100% {
516 transform: rotate(360deg);
517 }
518 }
519 .keyframes-rotates {
520 -webkit-animation: starts 8s linear infinite 0.3s;
521 /* Safari 和 Chrome */
522 -moz-animation: starts 8s linear infinite 0.3s;
523 /* Firefox 4 */
524 -ms-animation: starts 8s linear infinite 0.3s;
525 /* IE */
526 -o-animation: starts 8s linear infinite 0.3s;
527 /* Opera */
528 animation: starts 8s linear infinite 0.3s;
529 }
sass
sass-base.scss
1 @charset "utf-8";
2 //清楚标签默认样式;
3 @mixin label(){
4 /* 清楚标签默认样式 */
5 html {margin: 0; padding: 0; border: 0;_background-image:url(n1othing.txt)}
6 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; }
7 ol, ul, li { list-style: none; }
8 body {line-height: 1.5; background: white; font-family: ‘Microsoft Yahei‘, Arial, Helvetica, sans-serif; font-size: 12px; color: #333;}
9 table,tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline;}
10 caption, th, td { text-align: left; font-weight: normal; float: none !important; }
11 table, th, td, select, img, input,object{ vertical-align: middle;}
12 :focus { outline: 0;}
13 input,select{margin:0;}
14 a { color: #005EA7; text-decoration: none; }
15 a:hover { text-decoration:underline; }
16 p,a,td{word-wrap:break-word;word-break:break-all;}
17 img { border: none;vertical-align:top; }
18 textarea{ resize:none;border:1px solid #ccc;}
19 textarea:hover{border-color:#ccc;}
20 input[type="text"],input[type="button"]{-webkit-appearance: none;border-radius: 0;font-family:‘Microsoft Yahei‘,‘黑体‘, Arial, Helvetica, sans-serif;}
21 input[type="text"]{border:solid 1px #ccc; border-radius:0;}
22 dfn {font-style: normal;font-family: Arial;}
23 }
24
25 //浮动;
26 @mixin fl{
27 float:left;
28 }
29 @mixin fr{
30 float:right;
31 }
32 @mixin float($dir:left){
33 float:$dir;
34 }
35 //清除浮动;
36 @mixin clear(){
37 *zoom:1;
38 &:after{
39 content: "";
40 display: block;
41 height: 0;
42 clear: both;
43 visibility: hidden;
44 overflow: hidden;
45 }
46 }
47 //清除滚动条出现的闪动;
48 @mixin outer{
49 // margin-left: calc(100vw - 100%)!important;
50 }
51 ///////////////////////////////////////////////
52 // 循环初始字体大小: //
53 // @end : 结束字体大小(数字),必须输; //
54 // @begin : 开始字体大小(数字),可以省略; //
55 // @un : 字体单位(字符串),可以省略; //
56 // 例子 : @include base-fonts(32); //
57 ///////////////////////////////////////////////
58 @mixin base-fonts( $end:100,$begin:12,$un:px ){
59
60 @if( TestNum( $begin,$end ) ){
61 @for $i from $begin through $end {
62 @if( $i%2 == 0 ){
63 .f-#{$i}{ font-size:$i+$un; }
64 }
65 }
66 }
67
68 }
69
70 /////////////////////////////////////////////////////////////
71 // 循环初始默认样式: //
72 // @name : 样式前缀名,必须输; //
73 // @style : 设置样式,必须输; //
74 // @end : 结束样式,必须输; //
75 // @begin : 开始样式,可以省略; //
76 // @mult : 循环累加倍数,可以省略; //
77 // @un : 字体单位(字符串),可以省略; //
78 // 例子 : @include base-styles(mb,margin-bottom,30,5); //
79 /////////////////////////////////////////////////////////////
80 @mixin base-styles( $name,$style,$end:100,$begin:5,$mult:5,$un:px ){
81
82 @if( TestNum( $begin,$end ) ){
83 @for $i from $begin through $end {
84 @if( $i%$mult == 0 ){
85 .#{$name}-#{$i}{ #{$style}:$i+$un; }
86 }
87
88 }
89 }
90
91 }
92
93 //判断是否为数字;
94 @function TestNum( $num1,$num2 ){
95
96 @if ( not unitless($num1) or not unitless($num2) ){
97 @debug "其中数值有单位";
98 @return false;
99 }
100 @if ( type-of($num1) == number and type-of($num1) == number ) {
101 @return true;
102 }@else{
103 @debug "其中有值不数字";
104 @return false;
105 }
106 }
107
108 //一行显示。。。。;
109 @mixin ellipsis{
110 white-space:nowrap;
111 text-overflow:ellipsis;
112 overflow:hidden;
113 }
114 // 强制折行;
115 @mixin break-word{
116 word-break:break-all; /*支持IE，chrome，FF不支持*/
117 word-wrap:break-word; /*支持IE，chrome，FF*/
118 }
119 //设置字体;
120 @mixin f($size:12,$un:px){font-size:$size+$un; }
121 //设置字体;
122 @mixin fa($family:‘Microsoft Yahei‘){ font-family:$family,‘宋体‘,‘黑体‘;}
123 @mixin tal{ text-align: left; }
124 @mixin tar{ text-align: right; }
125 @mixin tac{ text-align: center; }
126 @mixin text-align( $dir:left ){text-align: $dir;}
127 @mixin over{overflow:hidden; }
128 @mixin ofv{overflow:visible !important;}
129 @mixin hide{ display:none; }
130 @mixin block{ display:block; }
131 @mixin abs{ position: absolute; }
132 @mixin rel{ position: relative; }
133 @mixin cur{ cursor: pointer; }
134 @mixin def{ cursor:default;}
135
136 //css3过渡;
137 @mixin tran($name:all,$time:2s){
138 -webkit-transition : $name $time; /* Safari 和 Chrome */
139 -moz-transition : $name $time; /* Firefox 4 */
140 -ms-transition : $name $time; /* IE */
141 -o-transition : $name $time; /* Opera */
142 transition : $name $time;
143 }
144
145 //css3;
146 @mixin css3( $style,$frames ){
147 -webkit-#{$style} : $frames; /* Safari 和 Chrome */
148 -moz-#{$style} : $frames; /* Firefox 4 */
149 -o-#{$style} : $frames; /* Opera */
150 #{$style} : $frames;
151 }
152
153 //透明;
154 @mixin opa($num:0.8){
155 opacity : $num;
156 filter : alpha(opacity=$num*100);
157 }
158
159 //css3圆角;
160 @mixin border-radius($radius: 5px) {
161 -webkit-border-radius : $radius; /* Safari 和 Chrome */
162 -moz-border-radius : $radius; /* Firefox 4 */
163 -ms-border-radius : $radius; /* IE */
164 -o-border-radius : $radius; /* Opera */
165 border-radius : $radius;
166 }
167
168 //改变默认选中颜色
169 @mixin selection( $bg:#00F,$color:#fff,$obj:0 ){
170
171 @if( type-of($obj) == number ){
172
173 ::selection {
174 background:$bg;
175 color:$color;
176 }
177 ::-moz-selection {
178 background:$bg;
179 color:$color;
180 }
181 ::-webkit-selection {
182 background:$bg;
183 color:$color;
184 }
185 ::-ms-selection {
186 background:$bg;
187 color:$color;
188 }
189 ::-o-selection {
190 background:$bg;
191 color:$color;
192 }
193
194 }@else{
195
196 .#{$obj}::selection {
197 background:$bg;
198 color:$color;
199 }
200 .#{$obj}::-moz-selection {
201 background:$bg;
202 color:$color;
203 }
204 .#{$obj}::-webkit-selection {
205 background:$bg;
206 color:$color;
207 }
208 .#{$obj}::-ms-selection {
209 background:$bg;
210 color:$color;
211 }
212 .#{$obj}::-o-selection {
213 background:$bg;
214 color:$color;
215 }
216
217 }
218 }
219
220 ///////////////////////////////////////////////////////////////////////////
221 // css3动画,只能写在调用页面,配合.css3( @style,@frames )使用; //
222 // 例子 : //
223 // @include keyframes(animation-name) { //
224 // 0% { //
225 // #{$browser}transform: translate3d(100%, 0, 0); //
226 // } //
227 // 100% { //
228 // #{$browser}transform: translate3d(0%, 0, 0); //
229 // } //
230 // } //
231 // .className{ @include css3(animation,animation-name 5s infinite); } //
232 ///////////////////////////////////////////////////////////////////////////
233 $browser: null;
234 @mixin keyframes($animationName) {
235 @-webkit-keyframes #{$animationName} {
236 $browser: ‘-webkit-‘ !global;
237 @content;
238 }
239 @-moz-keyframes #{$animationName} {
240 $browser: ‘-moz-‘ !global;
241 @content;
242 }
243 @-ms-keyframes #{$animationName} {
244 $browser: ‘-ms-‘ !global;
245 @content;
246 }
247 @-o-keyframes #{$animationName} {
248 $browser: ‘-o-‘ !global;
249 @content;
250 }
251 @keyframes #{$animationName} {
252 $browser: ‘‘ !global;
253 @content;
254 }
255 }
256
257 ///////////////////////////////////////////////////////////////////////////
258 // css3 滚动条; //
259 // 例子 : //
260 // @include scrollbar(scrollbar-track){ //
261 // #{$browser}box-shadow: inset 0 0 6px rgba(0,0,0,0.3); //
262 // background-color: #F5F5F5; //
263 // }; //
264 // @include scrollbar(scrollbar){ //
265 // width: 12px; //
266 // }; //
267 // @include scrollbar(scrollbar-thumb){ //
268 // #{$browser}border-radius: 10px; //
269 // #{$browser}box-shadow: inset 0 0 6px rgba(0,0,0,.3); //
270 // background-color: #fbd0c9; //
271 // }; //
272 ///////////////////////////////////////////////////////////////////////////
273 @mixin scrollbar($style){
274 ::-webkit-#{$style}{
275 $browser: ‘-webkit-‘ !global;
276 @content;
277 }
278 ::-moz-#{$style}{
279 $browser: ‘-moz-‘ !global;
280 @content;
281 }
282 ::-ms-#{$style}{
283 $browser: ‘-ms-‘ !global;
284 @content;
285 }
286 ::-o-#{$style}{
287 $browser: ‘-o-‘ !global;
288 @content;
289 }
290 ::#{$style}{
291 $browser: ‘‘ !global;
292 @content;
293 }
294 }
295
296
297 //打包默认样式;
298 @mixin base($content:950,$unit:px,$orange:#f60,$yellow:#fff000,$blue:#5fb3d2,$red:#ff546a,$gray:#ccc,$disabled:#ccc,$bor_color:#ccc){
299 @include label();
300 /* 默认浮动 */
301 .fl{
302 @include fl;
303 }
304 .fr{
305 @include fr;
306 }
307 .clear{
308 @include clear;
309 }
310 /* 显示隐藏 */
311 .hide{
312 @include hide;
313 }
314 .show{
315 @include block;
316 }
317 /* 文本方向 */
318 .tal{
319 @include tal;
320 }
321 .tar{
322 @include tar;
323 }
324 .tac{
325 @include tac;
326 }
327 /* 截取 */
328 .over{
329 @include over;
330 }
331 .ofv{
332 @include ofv;
333 }
334 /* 定位 */
335 .abs{
336 @include abs;
337 }
338 .rel{
339 @include rel;
340 }
341 /* 鼠标手势 */
342 .cursor{
343 @include cur;
344 }
345 .def{
346 @include def;
347 }
348 /* 。。。。 */
349 .ellipsis{
350 @include ellipsis;
351 }
352 /* 强制折行 */
353 .break-word{
354 @include break-word;
355 }
356 /* 默认颜色 */
357 .colr-red{color: $red;}
358 .colr-blue{color: $blue;}
359 .colr-gray{color: $gray;}
360 .colr-yellow{color: $yellow;}
361 .colr-org{color: $orange;}
362 /* 默认背景颜色 */
363 .bg-red{ background-color: $red;}
364 .bg-blue{background-color: $blue;}
365 .bg-gray{background-color: $gray;}
366 .bg-yellow{background-color: $yellow;}
367 .bg-org{background-color: $orange;}
368 /* 默认置灰 */
369 .disabled{ background-color:$disabled; }
370 /* 默认字体 */
371 @include base-fonts(32,$un:$unit);
372 /* margin padding */
373 .mt0 { margin-top: 0 !important; }
374 @include base-styles(mt,margin-top,30,5,$un:$unit);
375 .mb0 { margin-bottom: 0 !important; }
376 @include base-styles(mb,margin-bottom,30,5,$un:$unit);
377 .ml0 { margin-left: 0 !important; }
378 @include base-styles(ml,margin-left,30,5,$un:$unit);
379 .mr0 { margin-right: 0 !important; }
380 @include base-styles(mr,margin-right,30,5,$un:$unit);
381 /* 高度 */
382 @include base-styles(blk,height,50,5,$un:$unit);
383 /* 边框 */
384 .bor_t{ border-top:solid 1px $bor_color;}
385 .bor_l{ border-left:solid 1px $bor_color;}
386 .bor_r{ border-right:solid 1px $bor_color;}
387 .bor_b{ border-bottom:solid 1px $bor_color;}
388 .bor_t0{ border-top:none!important;}
389 .bor_l0{ border-left:none!important;}
390 .bor_r0{ border-right:none!important;}
391 .bor_b0{ border-bottom:none!important;}
392 .bor_das{ border:1px dashed $bor_color;}
393 .bor_dot{ border:1px dotted $bor_color;}
394 .border{ border:1px solid $bor_color;}
395 /* box */
396 .content{ width: $content+$unit; margin:0 auto; }
397 }
应用 index.scss:
1 @charset "UTF-8";//解决中文注释问题;
2 //引入底层库;
3 @import "sass-base.scss";
4
5 //默认初始化;
6 @include base($content:1000);
7
8 /*方法*/
9 .f12{
10 @include f(12);
11 }
12
13 /*css3圆角*/
14 .border-radius{
15 @include border-radius(5px);
16 }
17
18 /*css3过渡*/
19 .transitions{
20 @include tran();
21 }
22
23 /*css3旋转*/
24 .rotate60{
25 @include css3(transform,rotate(60deg));
26 }
27
28 /*旋转keyframes*/
29 @include keyframes(rotates) {
30 0% {
31 #{$browser}transform:rotate(0deg);
32 }
33 100% {
34 #{$browser}transform:rotate(360deg);
35 }
36 }
37
38 /*引用旋转keyframes*/
39 .keyframes-rotates{ @include css3(animation,starts 8s linear infinite .3s ); }
最后生成的css:
1 @charset "UTF-8";
2 /* 清楚标签默认样式 */
3 html { margin: 0; padding: 0; border: 0; _background-image: url(n1othing.txt); }
4
5 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; }
6
7 ol, ul, li { list-style: none; }
8
9 body { line-height: 1.5; background: white; font-family: ‘Microsoft Yahei‘, Arial, Helvetica, sans-serif; font-size: 12px; color: #333; }
10
11 table, tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; }
12
13 caption, th, td { text-align: left; font-weight: normal; float: none !important; }
14
15 table, th, td, select, img, input, object { vertical-align: middle; }
16
17 :focus { outline: 0; }
18
19 input, select { margin: 0; }
20
21 a { color: #005EA7; text-decoration: none; }
22
23 a:hover { text-decoration: underline; }
24
25 p, a, td { word-wrap: break-word; word-break: break-all; }
26
27 img { border: none; vertical-align: top; }
28
29 textarea { resize: none; border: 1px solid #ccc; }
30
31 textarea:hover { border-color: #ccc; }
32
33 input[type="text"], input[type="button"] { -webkit-appearance: none; border-radius: 0; font-family: ‘Microsoft Yahei‘,‘黑体‘, Arial, Helvetica, sans-serif; }
34
35 input[type="text"] { border: solid 1px #ccc; border-radius: 0; }
36
37 dfn { font-style: normal; font-family: Arial; }
38
39 /* 默认浮动 */
40 .fl { float: left; }
41
42 .fr { float: right; }
43
44 .clear { *zoom: 1; }
45 .clear:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }
46
47 /* 显示隐藏 */
48 .hide { display: none; }
49
50 .show { display: block; }
51
52 /* 文本方向 */
53 .tal { text-align: left; }
54
55 .tar { text-align: right; }
56
57 .tac { text-align: center; }
58
59 /* 截取 */
60 .over { overflow: hidden; }
61
62 .ofv { overflow: visible !important; }
63
64 /* 定位 */
65 .abs { position: absolute; }
66
67 .rel { position: relative; }
68
69 /* 鼠标手势 */
70 .cursor { cursor: pointer; }
71
72 .def { cursor: default; }
73
74 /* 。。。。 */
75 .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
76
77 /* 强制折行 */
78 .break-word { word-break: break-all; /*支持IE，chrome，FF不支持*/ word-wrap: break-word; /*支持IE，chrome，FF*/ }
79
80 /* 默认颜色 */
81 .colr-red { color: #ff546a; }
82
83 .colr-blue { color: #5fb3d2; }
84
85 .colr-gray { color: #ccc; }
86
87 .colr-yellow { color: #fff000; }
88
89 .colr-org { color: #f60; }
90
91 /* 默认背景颜色 */
92 .bg-red { background-color: #ff546a; }
93
94 .bg-blue { background-color: #5fb3d2; }
95
96 .bg-gray { background-color: #ccc; }
97
98 .bg-yellow { background-color: #fff000; }
99
100 .bg-org { background-color: #f60; }
101
102 /* 默认置灰 */
103 .disabled { background-color: #ccc; }
104
105 /* 默认字体 */
106 .f-12 { font-size: 12px; }
107
108 .f-14 { font-size: 14px; }
109
110 .f-16 { font-size: 16px; }
111
112 .f-18 { font-size: 18px; }
113
114 .f-20 { font-size: 20px; }
115
116 .f-22 { font-size: 22px; }
117
118 .f-24 { font-size: 24px; }
119
120 .f-26 { font-size: 26px; }
121
122 .f-28 { font-size: 28px; }
123
124 .f-30 { font-size: 30px; }
125
126 .f-32 { font-size: 32px; }
127
128 /* margin padding */
129 .mt0 { margin-top: 0 !important; }
130
131 .mt-5 { margin-top: 5px; }
132
133 .mt-10 { margin-top: 10px; }
134
135 .mt-15 { margin-top: 15px; }
136
137 .mt-20 { margin-top: 20px; }
138
139 .mt-25 { margin-top: 25px; }
140
141 .mt-30 { margin-top: 30px; }
142
143 .mb0 { margin-bottom: 0 !important; }
144
145 .mb-5 { margin-bottom: 5px; }
146
147 .mb-10 { margin-bottom: 10px; }
148
149 .mb-15 { margin-bottom: 15px; }
150
151 .mb-20 { margin-bottom: 20px; }
152
153 .mb-25 { margin-bottom: 25px; }
154
155 .mb-30 { margin-bottom: 30px; }
156
157 .ml0 { margin-left: 0 !important; }
158
159 .ml-5 { margin-left: 5px; }
160
161 .ml-10 { margin-left: 10px; }
162
163 .ml-15 { margin-left: 15px; }
164
165 .ml-20 { margin-left: 20px; }
166
167 .ml-25 { margin-left: 25px; }
168
169 .ml-30 { margin-left: 30px; }
170
171 .mr0 { margin-right: 0 !important; }
172
173 .mr-5 { margin-right: 5px; }
174
175 .mr-10 { margin-right: 10px; }
176
177 .mr-15 { margin-right: 15px; }
178
179 .mr-20 { margin-right: 20px; }
180
181 .mr-25 { margin-right: 25px; }
182
183 .mr-30 { margin-right: 30px; }
184
185 /* 高度 */
186 .blk-5 { height: 5px; }
187
188 .blk-10 { height: 10px; }
189
190 .blk-15 { height: 15px; }
191
192 .blk-20 { height: 20px; }
193
194 .blk-25 { height: 25px; }
195
196 .blk-30 { height: 30px; }
197
198 .blk-35 { height: 35px; }
199
200 .blk-40 { height: 40px; }
201
202 .blk-45 { height: 45px; }
203
204 .blk-50 { height: 50px; }
205
206 /* 边框 */
207 .bor_t { border-top: solid 1px #ccc; }
208
209 .bor_l { border-left: solid 1px #ccc; }
210
211 .bor_r { border-right: solid 1px #ccc; }
212
213 .bor_b { border-bottom: solid 1px #ccc; }
214
215 .bor_t0 { border-top: none !important; }
216
217 .bor_l0 { border-left: none !important; }
218
219 .bor_r0 { border-right: none !important; }
220
221 .bor_b0 { border-bottom: none !important; }
222
223 .bor_das { border: 1px dashed #ccc; }
224
225 .bor_dot { border: 1px dotted #ccc; }
226
227 .border { border: 1px solid #ccc; }
228
229 /* box */
230 .content { width: 1000px; margin: 0 auto; }
231
232 /*方法*/
233 .f12 { font-size: 12px; }
234
235 /*css3圆角*/
236 .border-radius { -webkit-border-radius: 5px; /* Safari 和 Chrome */ -moz-border-radius: 5px; /* Firefox 4 */ -ms-border-radius: 5px; /* IE */ -o-border-radius: 5px; /* Opera */ border-radius: 5px; }
237
238 /*css3过渡*/
239 .transitions { -webkit-transition: all 2s; /* Safari 和 Chrome */ -moz-transition: all 2s; /* Firefox 4 */ -ms-transition: all 2s; /* IE */ -o-transition: all 2s; /* Opera */ transition: all 2s; }
240
241 /*css3旋转*/
242 .rotate60 { -webkit-transform: rotate(60deg); /* Safari 和 Chrome */ -moz-transform: rotate(60deg); /* Firefox 4 */ -o-transform: rotate(60deg); /* Opera */ transform: rotate(60deg); }
243
244 /*旋转keyframes*/
245 @-webkit-keyframes rotates { 0% { -webkit-transform: rotate(0deg); }
246 100% { -webkit-transform: rotate(360deg); } }
247 @-moz-keyframes rotates { 0% { -moz-transform: rotate(0deg); }
248 100% { -moz-transform: rotate(360deg); } }
249 @-ms-keyframes rotates { 0% { -ms-transform: rotate(0deg); }
250 100% { -ms-transform: rotate(360deg); } }
251 @-o-keyframes rotates { 0% { -o-transform: rotate(0deg); }
252 100% { -o-transform: rotate(360deg); } }
253 @keyframes rotates { 0% { transform: rotate(0deg); }
254 100% { transform: rotate(360deg); } }
255 /*引用旋转keyframes*/
256 .keyframes-rotates { -webkit-animation: starts 8s linear infinite 0.3s; /* Safari 和 Chrome */ -moz-animation: starts 8s linear infinite 0.3s; /* Firefox 4 */ -o-animation: starts 8s linear infinite 0.3s; /* Opera */ animation: starts 8s linear infinite 0.3s; }
后记:
工作大体总结的小小底层库，分了less,sass写的两个版本而已,当然sass本身就有compass这个库,个人愚见从实战使用上也没多大用,不如自己写写还能加深语法使用;
时间： 2024-11-16 18:31:31