less/sass 基础base文件

less

less-base.less文件展示：

 //清除标签默认样式;
 .label(){
     html {margin:; padding:; border:;_background-image:url(n1othing.txt)}
     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:; padding:; border:; font-size: 100%; vertical-align: baseline; }
     ol, ul, li { list-style: none; }
     body {line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 12px; color: #333;}
     table,tr, th, td { border-collapse: collapse; margin:; padding:;  font-size: 100%; vertical-align: baseline;}
     caption, th, td { text-align: left; font-weight: normal; float: none !important; }
     table, th, td, select, img, input,object{ vertical-align: middle;}
     :focus { outline:;}
     input,select{margin:;}
     a { color: #005EA7; text-decoration: none; }
     a:hover {color: #C7000B; text-decoration: none; }
     p,a,td{word-wrap:break-word;word-break:break-all;}
     img { border: none;vertical-align:top; }
     textarea{ resize:none;border:1px solid #ccc;}
     textarea:hover{border-color:#ccc;}
     input[type="text"],input[type="button"]{-webkit-appearance: none;border-radius:;font-family:'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif;}
     input[type="text"]{border:solid 1px #ccc; border-radius:;}
     dfn {font-style: normal;font-family: Arial;}
 }

 .fl(){ float:left; } //左浮动;
 .fr(){ float:right;} //右浮动;
 //设置方向浮动;
 .float( @dire : left ){
     float:@dire;
 }
 //清除浮动;
 .clear(){
     *zoom:;
     &:after{
         content: "";
         display: block;
         height:;
         clear: both;
         visibility: hidden;
         overflow: hidden;
     }
 }
 //清右浮动;
 .clr(){
     clear: both;
     display: block;
     font-size:;
     height:;
     line-height:;
     overflow: hidden;
 }

 /**
  * 循环初始字体大小:
  *     @end   : 结束字体大小(数字),必须输;
  *     @begin : 开始字体大小(数字),可以省略;
  *     @un    : 字体单位(字符串),可以省略;
  *     例子   : .base-fonts(28);
  */
 .base-fonts( @end,@begin:12,@un:px) when ( @begin =< @end ) {
     .f-@{begin}{
         font-size:unit(@begin, @un);
     }
     .base-fonts( @end,( @begin+2 ),@un );
 }

 /**
  * 循环初始默认样式:
  *     @name  : 样式前缀名,必须输;
  *    @style : 设置样式,必须输;
  *    @end   : 结束样式,必须输;
  *    @begin : 开始样式,可以省略;
  *    @mult  : 循环累加倍数,可以省略;
  *     @un    : 字体单位(字符串),可以省略;
  *     例子   : .base-styles(mb,margin-bottom,30,5);
  */
 .base-styles(@name:name,@style,@end,@begin:5,@mult:5,@un:px ) when ( @begin =< @end ) {
     .@{name}-@{begin}{
         @{style}:unit(@begin, @un);
     }
     .base-styles( @name,@style,@end,(@begin+@mult),@mult,@un );
 }

 //一行显示。。。。
 .ellipsis(){
     white-space:nowrap;
     text-overflow:ellipsis;
     overflow:hidden;
 }
 /* 强制折行 */
 .break-word(){
     word-break:break-all; /*支持IE，chrome，FF不支持*/
 　　word-wrap:break-word; /*支持IE，chrome，FF*/
 }

 //设置字体;
 .f(@size:12,@un:px){font-size:unit(@size, @un); }
 //设置字体;
 .fa(@family:'Microsoft Yahei'){ font-family:@family,'宋体','黑体';}
 .tal(){ text-align: left; }
 .tar(){ text-align: right; }
 .tac(){ text-align: center; }
 .text-align( @dir:left ){text-align: @dir;}
 .over(){overflow:hidden; }
 .ofv(){overflow:visible !important;}
 .hide(){ display:none;  }
 .block(){ display:block; }
 .abs(){ position: absolute; }
 .rel(){ position: relative; }
 .cur(){ cursor: pointer; }
 .def(){ cursor:default;}

 //css3过渡;
 .tran(@name:all,@time:2s){
     -webkit-transition : @name @time;  /* Safari 和 Chrome */
        -moz-transition : @name @time;  /* Firefox 4 */
         -ms-transition : @name @time;  /* IE */
          -o-transition : @name @time;  /* Opera */
             transition : @name @time;
 }

 //css3;
 .css3( @style,@frames ){
     -webkit-@{style} : @frames;  /* Safari 和 Chrome */
        -moz-@{style} : @frames;  /* Firefox 4 */
         -ms-@{style} : @frames;  /* IE */
          -o-@{style} : @frames;  /* Opera */
             @{style} : @frames;
 }

 //透明;
 .opa(@num:0.8){
     opacity : @num;
     filter  : ~'alpha(opacity='@num*100~')';
 }

 //css3圆角;
 .border-radius(@radius: 5px) {
   -webkit-border-radius : @radius;  /* Safari 和 Chrome */
      -moz-border-radius : @radius;  /* Firefox 4 */
       -ms-border-radius : @radius;  /* IE */
        -o-border-radius : @radius;  /* Opera */
           border-radius : @radius;
 }

 /**
  * css3动画,只能写在调用页面,配合.css3( @style,@frames )使用;
  * 例子 :
  * .keyframes(starts,{
         0% {transform:rotate(0deg)}
         100%{transform:rotate(360deg)}
     });
     .className{.css3(animation,starts 8s linear infinite .3s );}
  */
 .keyframes(@name, @frames) {
     @-webkit-keyframes @name { @frames(); }  /* Safari 和 Chrome */
        @-moz-keyframes @name { @frames(); }  /* Firefox 4 */
         @-ms-keyframes @name { @frames(); }  /* IE */
          @-o-keyframes @name { @frames(); }  /* Opera */
             @keyframes @name { @frames(); }
 }

 //打包默认样式;
 .base(@content:950,@unit:px,@orange:#f60,@yellow:#fff000,@blue:#5fb3d2,@red:#ff546a,@gray:#ccc,@disabled:#ccc,@bor_color:#ccc){
     .label();
     /* 默认浮动 */
     .fl{
         .fl();
     }
     .fr{
         .fr();
     }
     .clear{
         .clear();
     }
     /* 显示隐藏 */
     .hide{
         .hide();
     }
     .show{
         .block();
     }
     /* 文本方向 */
     .tal{
         .tal();
     }
     .tar{
         .tar();
     }
     .tac{
         .tac();
     }
     /* 截取 */
     .over{
         .over();
     }
     .ofv{
         .ofv();
     }
     /* 定位 */
     .abs{
         .abs();
     }
     .rel{
         .rel();
     }
     /* 鼠标手势 */
     .cursor{
         .cur();
     }
     .def{
         .def();
     }
     /* 。。。。 */
     .ellipsis{
         .ellipsis();
     }
     /* 强制折行 */
     .break-word{
         .break-word();
     }
     /* 默认颜色 */
     .colr-red{color: @red;}
     .colr-blue{color: @blue;}
     .colr-gray{color: @gray;}
     .colr-yellow{color: @yellow;}
     .colr-org{color: @orange;}
     /* 默认背景颜色 */
     .bg-red{ background-color: @red;}
     .bg-blue{background-color: @blue;}
     .bg-gray{background-color: @gray;}
     .bg-yellow{background-color: @yellow;}
     .bg-org{background-color: @orange;}
     /* 默认置灰 */
     .disabled{ background-color:@disabled; }
     /* 默认字体 */
     .base-fonts(32,@un:@unit);
     /* margin  padding */
     .mt0 { margin-top: 0 !important; }
     .base-styles(mt,margin-top,30,5,@un:@unit);
     .mb0 { margin-bottom: 0 !important; }
     .base-styles(mb,margin-bottom,30,5,@un:@unit);
     .ml0 { margin-left: 0 !important; }
     .base-styles(ml,margin-left,30,5,@un:@unit);
     .mr0 { margin-right: 0 !important; }
     .base-styles(mr,margin-right,30,5,@un:@unit);
     /* 高度 */
     .base-styles(blk,height,50,5,@un:@unit);
     /* 边框 */
     .bor_t{ border-top:solid 1px @bor_color;}
     .bor_l{ border-left:solid 1px @bor_color;}
     .bor_r{ border-right:solid 1px @bor_color;}
     .bor_b{ border-bottom:solid 1px @bor_color;}
     .bor_t0{ border-top:none!important;}
     .bor_l0{ border-left:none!important;}
     .bor_r0{ border-right:none!important;}
     .bor_b0{ border-bottom:none!important;}
     .bor_das{ border:1px dashed @bor_color;}
     .bor_dot{ border:1px dotted @bor_color;}
     .border{ border:1px solid @bor_color;}
     /* box */
     .content{ width: unit(@content,@unit); margin:0 auto; }
 }

应用 index.less:

 //引入底层库;
 @import (reference) "less-base.less";

 //默认初始化;
 .base(@content:1000);

 /*方法*/
 .f12{
     .f(12);
 }

 /*css3透明*/
 .opa8{
     .opa(0.8);
 }

 /*css3圆角*/
 .border-radius{
     .border-radius(5px);
 }

 /*css3过渡*/
 .transitions{
     .tran();
 }

 /*css3旋转*/
 .rotate60{
     .css3(transform,rotate(60deg));
 }

 /* keyframes 必须放在引用页面调用 */
 .keyframes(@name, @frames) {
       @-webkit-keyframes @name { @frames(); }
        @-moz-keyframes @name { @frames(); }
         @-ms-keyframes @name { @frames(); }
          @-o-keyframes @name { @frames(); }
             @keyframes @name { @frames(); }
 }

 /*旋转keyframes*/
 .keyframes(rotates,{
     0% {transform:rotate(0deg)}
     100%{transform:rotate(360deg)}
 });

 /*引用旋转keyframes*/
 .keyframes-rotates{ .css3(animation,starts 8s linear infinite .3s ); }

最后生成的css:

 html {
   margin:;
   padding:;
   border:;
   _background-image: url(n1othing.txt);
 }
 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:;
   padding:;
   border:;
   font-size: 100%;
   vertical-align: baseline;
 }
 ol,
 ul,
 li {
   list-style: none;
 }
 body {
   line-height: 1.5;
   background: white;
   font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #333;
 }
 table,
 tr,
 th,
 td {
   border-collapse: collapse;
   margin:;
   padding:;
   font-size: 100%;
   vertical-align: baseline;
 }
 caption,
 th,
 td {
   text-align: left;
   font-weight: normal;
   float: none !important;
 }
 table,
 th,
 td,
 select,
 img,
 input,
 object {
   vertical-align: middle;
 }
 :focus {
   outline:;
 }
 input,
 select {
   margin:;
 }
 a {
   color: #005EA7;
   text-decoration: none;
 }
 a:hover {
   color: #C7000B;
   text-decoration: none;
 }
 p,
 a,
 td {
   word-wrap: break-word;
   word-break: break-all;
 }
 img {
   border: none;
   vertical-align: top;
 }
 textarea {
   resize: none;
   border: 1px solid #ccc;
 }
 textarea:hover {
   border-color: #ccc;
 }
 input[type="text"],
 input[type="button"] {
   -webkit-appearance: none;
   border-radius:;
   font-family: 'Microsoft Yahei', '黑体', Arial, Helvetica, sans-serif;
 }
 input[type="text"] {
   border: solid 1px #ccc;
   border-radius:;
 }
 dfn {
   font-style: normal;
   font-family: Arial;
 }
 /* 默认浮动 */
 .fl {
   float: left;
 }
 .fr {
   float: right;
 }
 .clear {
   *zoom:;
 }
 /* 显示隐藏 */
 .hide {
   display: none;
 }
 .show {
   display: block;
 }
 /* 文本方向 */
 .tal {
   text-align: left;
 }
 .tar {
   text-align: right;
 }
 .tac {
   text-align: center;
 }
 /* 截取 */
 .over {
   overflow: hidden;
 }
 .ofv {
   overflow: visible !important;
 }
 /* 定位 */
 .abs {
   position: absolute;
 }
 .rel {
   position: relative;
 }
 /* 鼠标手势 */
 .cursor {
   cursor: pointer;
 }
 .def {
   cursor: default;
 }
 /* 。。。。 */
 .ellipsis {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 /* 强制折行 */
 .break-word {
   word-break: break-all;
   word-wrap: break-word;
 }
 /* 默认颜色 */
 .colr-red {
   color: #ff546a;
 }
 .colr-blue {
   color: #5fb3d2;
 }
 .colr-gray {
   color: #cccccc;
 }
 .colr-yellow {
   color: #fff000;
 }
 .colr-org {
   color: #ff6600;
 }
 /* 默认背景颜色 */
 .bg-red {
   background-color: #ff546a;
 }
 .bg-blue {
   background-color: #5fb3d2;
 }
 .bg-gray {
   background-color: #cccccc;
 }
 .bg-yellow {
   background-color: #fff000;
 }
 .bg-org {
   background-color: #ff6600;
 }
 /* 默认置灰 */
 .disabled {
   background-color: #cccccc;
 }
 /* 默认字体 */
 .f-12 {
   font-size: 12px;
 }
 .f-14 {
   font-size: 14px;
 }
 .f-16 {
   font-size: 16px;
 }
 .f-18 {
   font-size: 18px;
 }
 .f-20 {
   font-size: 20px;
 }
 .f-22 {
   font-size: 22px;
 }
 .f-24 {
   font-size: 24px;
 }
 .f-26 {
   font-size: 26px;
 }
 .f-28 {
   font-size: 28px;
 }
 .f-30 {
   font-size: 30px;
 }
 .f-32 {
   font-size: 32px;
 }
 /* margin  padding */
 .mt0 {
   margin-top: 0 !important;
 }
 .mt-5 {
   margin-top: 5px;
 }
 .mt-10 {
   margin-top: 10px;
 }
 .mt-15 {
   margin-top: 15px;
 }
 .mt-20 {
   margin-top: 20px;
 }
 .mt-25 {
   margin-top: 25px;
 }
 .mt-30 {
   margin-top: 30px;
 }
 .mb0 {
   margin-bottom: 0 !important;
 }
 .mb-5 {
   margin-bottom: 5px;
 }
 .mb-10 {
   margin-bottom: 10px;
 }
 .mb-15 {
   margin-bottom: 15px;
 }
 .mb-20 {
   margin-bottom: 20px;
 }
 .mb-25 {
   margin-bottom: 25px;
 }
 .mb-30 {
   margin-bottom: 30px;
 }
 .ml0 {
   margin-left: 0 !important;
 }
 .ml-5 {
   margin-left: 5px;
 }
 .ml-10 {
   margin-left: 10px;
 }
 .ml-15 {
   margin-left: 15px;
 }
 .ml-20 {
   margin-left: 20px;
 }
 .ml-25 {
   margin-left: 25px;
 }
 .ml-30 {
   margin-left: 30px;
 }
 .mr0 {
   margin-right: 0 !important;
 }
 .mr-5 {
   margin-right: 5px;
 }
 .mr-10 {
   margin-right: 10px;
 }
 .mr-15 {
   margin-right: 15px;
 }
 .mr-20 {
   margin-right: 20px;
 }
 .mr-25 {
   margin-right: 25px;
 }
 .mr-30 {
   margin-right: 30px;
 }
 /* 高度 */
 .blk-5 {
   height: 5px;
 }
 .blk-10 {
   height: 10px;
 }
 .blk-15 {
   height: 15px;
 }
 .blk-20 {
   height: 20px;
 }
 .blk-25 {
   height: 25px;
 }
 .blk-30 {
   height: 30px;
 }
 .blk-35 {
   height: 35px;
 }
 .blk-40 {
   height: 40px;
 }
 .blk-45 {
   height: 45px;
 }
 .blk-50 {
   height: 50px;
 }
 /* 边框 */
 .bor_t {
   border-top: solid 1px #cccccc;
 }
 .bor_l {
   border-left: solid 1px #cccccc;
 }
 .bor_r {
   border-right: solid 1px #cccccc;
 }
 .bor_b {
   border-bottom: solid 1px #cccccc;
 }
 .bor_t0 {
   border-top: none!important;
 }
 .bor_l0 {
   border-left: none!important;
 }
 .bor_r0 {
   border-right: none!important;
 }
 .bor_b0 {
   border-bottom: none!important;
 }
 .bor_das {
   border: 1px dashed #cccccc;
 }
 .bor_dot {
   border: 1px dotted #cccccc;
 }
 .border {
   border: 1px solid #cccccc;
 }
 /* box */
 .content {
   width: 1000px;
   margin: 0 auto;
 }
 /*方法*/
 .f12 {
   font-size: 12px;
 }
 /*css3透明*/
 .opa8 {
   opacity: 0.8;
   filter: alpha(opacity= 80 );
 }
 /*css3圆角*/
 .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;
 }
 /*css3过渡*/
 .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;
 }
 /*css3旋转*/
 .rotate60 {
   -webkit-transform: rotate(60deg);
   /* Safari 和 Chrome */
   -moz-transform: rotate(60deg);
   /* Firefox 4 */
   -ms-transform: rotate(60deg);
   /* IE */
   -o-transform: rotate(60deg);
   /* Opera */
   transform: rotate(60deg);
 }
 /* keyframes 必须放在引用页面调用 */
 /*旋转*/
 /* Safari 和 Chrome */
 /* Firefox 4 */
 /* IE */
 /* Opera */
 @-webkit-keyframes rotates {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }
 @-moz-keyframes rotates {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }
 @-ms-keyframes rotates {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }
 @-o-keyframes rotates {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }
 @keyframes rotates {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }
 .keyframes-rotates {
   -webkit-animation: starts 8s linear infinite 0.3s;
   /* Safari 和 Chrome */
   -moz-animation: starts 8s linear infinite 0.3s;
   /* Firefox 4 */
   -ms-animation: starts 8s linear infinite 0.3s;
   /* IE */
   -o-animation: starts 8s linear infinite 0.3s;
   /* Opera */
   animation: starts 8s linear infinite 0.3s;
 }

sass

sass-base.scss

 @charset "utf-8";
 //清楚标签默认样式;
 @mixin label(){
     /* 清楚标签默认样式  */
     html {margin:; padding:; border:;_background-image:url(n1othing.txt)}
     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:; padding:; border:; font-size: 100%; vertical-align: baseline; }
     ol, ul, li { list-style: none; }
     body {line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 12px; color: #333;}
     table,tr, th, td { border-collapse: collapse; margin:; padding:;  font-size: 100%; vertical-align: baseline;}
     caption, th, td { text-align: left; font-weight: normal; float: none !important; }
     table, th, td, select, img, input,object{ vertical-align: middle;}
     :focus { outline:;}
     input,select{margin:;}
     a { color: #005EA7; text-decoration: none; }
     a:hover { text-decoration:underline; }
     p,a,td{word-wrap:break-word;word-break:break-all;}
     img { border: none;vertical-align:top; }
     textarea{ resize:none;border:1px solid #ccc;}
     textarea:hover{border-color:#ccc;}
     input[type="text"],input[type="button"]{-webkit-appearance: none;border-radius:;font-family:'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif;}
     input[type="text"]{border:solid 1px #ccc; border-radius:;}
     dfn {font-style: normal;font-family: Arial;}
 }

 //浮动;
 @mixin fl{
     float:left;
 }
 @mixin fr{
    float:right;
 }
 @mixin float($dir:left){
     float:$dir;
 }
 //清除浮动;
 @mixin clear(){
     *zoom:;
     &:after{
         content: "";
         display: block;
         height:;
         clear: both;
         visibility: hidden;
         overflow: hidden;
     }
 }
 //清除滚动条出现的闪动;
 @mixin outer{
    // margin-left: calc(100vw - 100%)!important;
 }
 ///////////////////////////////////////////////
 // 循环初始字体大小:                         //
 //  @end   : 结束字体大小(数字),必须输;      //
 //  @begin : 开始字体大小(数字),可以省略;    //
 //  @un    : 字体单位(字符串),可以省略;      //
 //  例子   : @include base-fonts(32);        //
 ///////////////////////////////////////////////
 @mixin base-fonts( $end:100,$begin:12,$un:px ){

     @if( TestNum( $begin,$end ) ){
         @for $i from $begin through $end {
             @if( $i%2 == 0 ){
                 .f-#{$i}{ font-size:$i+$un; }
             }
         }
     }

 }

 /////////////////////////////////////////////////////////////
 // 循环初始默认样式:                                       //
 //  @name  : 样式前缀名,必须输;                            //
 //  @style : 设置样式,必须输;                              //
 //  @end   : 结束样式,必须输;                              //
 //  @begin : 开始样式,可以省略;                            //
 //  @mult  : 循环累加倍数,可以省略;                        //
 //  @un    : 字体单位(字符串),可以省略;                    //
 //  例子   : @include base-styles(mb,margin-bottom,30,5);  //
 /////////////////////////////////////////////////////////////
 @mixin base-styles( $name,$style,$end:100,$begin:5,$mult:5,$un:px ){

     @if( TestNum( $begin,$end ) ){
         @for $i from $begin through $end {
             @if( $i%$mult == 0 ){
                 .#{$name}-#{$i}{ #{$style}:$i+$un; }
             }

         }
     }

 }

 //判断是否为数字;
 @function TestNum( $num1,$num2 ){

     @if ( not unitless($num1) or not unitless($num2) ){
         @debug "其中数值有单位";
         @return false;
     }
     @if ( type-of($num1) == number and type-of($num1) == number ) {
         @return true;
     }@else{
         @debug "其中有值不数字";
         @return false;
     }
 }

 //一行显示。。。。;
 @mixin ellipsis{
     white-space:nowrap;
     text-overflow:ellipsis;
     overflow:hidden;
 }
 // 强制折行;
 @mixin break-word{
     word-break:break-all; /*支持IE，chrome，FF不支持*/
 　　word-wrap:break-word; /*支持IE，chrome，FF*/
 }
 //设置字体;
 @mixin f($size:12,$un:px){font-size:$size+$un; }
 //设置字体;
 @mixin fa($family:'Microsoft Yahei'){ font-family:$family,'宋体','黑体';}
 @mixin tal{ text-align: left; }
 @mixin tar{ text-align: right; }
 @mixin tac{ text-align: center; }
 @mixin text-align( $dir:left ){text-align: $dir;}
 @mixin over{overflow:hidden; }
 @mixin ofv{overflow:visible !important;}
 @mixin hide{ display:none;  }
 @mixin block{ display:block; }
 @mixin abs{ position: absolute; }
 @mixin rel{ position: relative; }
 @mixin cur{ cursor: pointer; }
 @mixin def{ cursor:default;}

 //css3过渡;
 @mixin tran($name:all,$time:2s){
     -webkit-transition : $name $time;  /* Safari 和 Chrome */
        -moz-transition : $name $time;  /* Firefox 4 */
         -ms-transition : $name $time;  /* IE */
          -o-transition : $name $time;  /* Opera */
             transition : $name $time;
 }

 //css3;
 @mixin css3( $style,$frames ){
     -webkit-#{$style} : $frames;  /* Safari 和 Chrome */
        -moz-#{$style} : $frames;  /* Firefox 4 */
          -o-#{$style} : $frames;  /* Opera */
             #{$style} : $frames;
 }

 //透明;
 @mixin opa($num:0.8){
     opacity : $num;
     filter  : alpha(opacity=$num*100);
 }

 //css3圆角;
 @mixin border-radius($radius: 5px) {
   -webkit-border-radius : $radius;  /* Safari 和 Chrome */
      -moz-border-radius : $radius;  /* Firefox 4 */
       -ms-border-radius : $radius;  /* IE */
        -o-border-radius : $radius;  /* Opera */
           border-radius : $radius;
 }

 //改变默认选中颜色
 @mixin selection( $bg:#00F,$color:#fff,$obj:0 ){

     @if( type-of($obj) == number ){

         ::selection {
             background:$bg;
             color:$color;
         }
         ::-moz-selection {
             background:$bg;
             color:$color;
         }
         ::-webkit-selection {
             background:$bg;
             color:$color;
         }
         ::-ms-selection {
             background:$bg;
             color:$color;
         }
         ::-o-selection {
             background:$bg;
             color:$color;
         }

     }@else{

         .#{$obj}::selection {
             background:$bg;
             color:$color;
         }
         .#{$obj}::-moz-selection {
             background:$bg;
             color:$color;
         }
         .#{$obj}::-webkit-selection {
             background:$bg;
             color:$color;
         }
         .#{$obj}::-ms-selection {
             background:$bg;
             color:$color;
         }
         .#{$obj}::-o-selection {
             background:$bg;
             color:$color;
         }

     }
 }

 ///////////////////////////////////////////////////////////////////////////
 // css3动画,只能写在调用页面,配合.css3( @style,@frames )使用;            //
 // 例子 :                                                                //
 //  @include keyframes(animation-name) {                                 //
 //      0% {                                                             //
 //         #{$browser}transform: translate3d(100%, 0, 0);                //
 //      }                                                                //
 //      100% {                                                           //
 //          #{$browser}transform: translate3d(0%, 0, 0);                 //
 //      }                                                                //
 //   }                                                                   //
 //   .className{ @include css3(animation,animation-name 5s infinite); }  //
 ///////////////////////////////////////////////////////////////////////////
 $browser: null;
 @mixin keyframes($animationName) {
     @-webkit-keyframes #{$animationName} {
         $browser: '-webkit-' !global;
         @content;
     }
     @-moz-keyframes #{$animationName} {
         $browser: '-moz-' !global;
         @content;
     }
     @-ms-keyframes #{$animationName} {
         $browser: '-ms-' !global;
         @content;
     }
     @-o-keyframes #{$animationName} {
         $browser: '-o-' !global;
         @content;
     }
     @keyframes #{$animationName} {
         $browser: '' !global;
         @content;
     }
 } 

 ///////////////////////////////////////////////////////////////////////////
 // css3 滚动条;                                                          //
 // 例子 :                                                                //
 //  @include scrollbar(scrollbar-track){                                 //
 //    #{$browser}box-shadow: inset 0 0 6px rgba(0,0,0,0.3);              //
 //    background-color: #F5F5F5;                                         //
 //  };                                                                   //
 //  @include scrollbar(scrollbar){                                       //
 //    width: 12px;                                                       //
 //  };                                                                   //
 //  @include scrollbar(scrollbar-thumb){                                 //
 //    #{$browser}border-radius: 10px;                                    //
 //    #{$browser}box-shadow: inset 0 0 6px rgba(0,0,0,.3);               //
 //    background-color: #fbd0c9;                                         //
 //  };                                                                   //
 ///////////////////////////////////////////////////////////////////////////
 @mixin scrollbar($style){
     ::-webkit-#{$style}{
         $browser: '-webkit-' !global;
         @content;
     }
     ::-moz-#{$style}{
         $browser: '-moz-' !global;
         @content;
     }
     ::-ms-#{$style}{
         $browser: '-ms-' !global;
         @content;
     }
     ::-o-#{$style}{
         $browser: '-o-' !global;
         @content;
     }
     ::#{$style}{
         $browser: '' !global;
         @content;
     }
 }

 //打包默认样式;
 @mixin base($content:950,$unit:px,$orange:#f60,$yellow:#fff000,$blue:#5fb3d2,$red:#ff546a,$gray:#ccc,$disabled:#ccc,$bor_color:#ccc){
      @include label();
     /* 默认浮动 */
     .fl{
         @include fl;
     }
     .fr{
         @include fr;
     }
     .clear{
         @include clear;
     }
     /* 显示隐藏 */
     .hide{
         @include hide;
     }
     .show{
         @include block;
     }
     /* 文本方向 */
     .tal{
         @include tal;
     }
     .tar{
         @include tar;
     }
     .tac{
         @include tac;
     }
     /* 截取 */
     .over{
         @include over;
     }
     .ofv{
         @include ofv;
     }
     /* 定位 */
     .abs{
         @include abs;
     }
     .rel{
         @include rel;
     }
     /* 鼠标手势 */
     .cursor{
         @include cur;
     }
     .def{
         @include def;
     }
     /* 。。。。 */
     .ellipsis{
         @include ellipsis;
     }
     /* 强制折行 */
     .break-word{
         @include break-word;
     }
     /* 默认颜色 */
     .colr-red{color: $red;}
     .colr-blue{color: $blue;}
     .colr-gray{color: $gray;}
     .colr-yellow{color: $yellow;}
     .colr-org{color: $orange;}
     /* 默认背景颜色 */
     .bg-red{ background-color: $red;}
     .bg-blue{background-color: $blue;}
     .bg-gray{background-color: $gray;}
     .bg-yellow{background-color: $yellow;}
     .bg-org{background-color: $orange;}
     /* 默认置灰 */
     .disabled{ background-color:$disabled; }
     /* 默认字体 */
     @include base-fonts(32,$un:$unit);
     /* margin  padding */
     .mt0 { margin-top: 0 !important; }
     @include base-styles(mt,margin-top,30,5,$un:$unit);
     .mb0 { margin-bottom: 0 !important; }
     @include base-styles(mb,margin-bottom,30,5,$un:$unit);
     .ml0 { margin-left: 0 !important; }
     @include base-styles(ml,margin-left,30,5,$un:$unit);
     .mr0 { margin-right: 0 !important; }
     @include base-styles(mr,margin-right,30,5,$un:$unit);
     /* 高度 */
     @include base-styles(blk,height,50,5,$un:$unit);
     /* 边框 */
     .bor_t{ border-top:solid 1px $bor_color;}
     .bor_l{ border-left:solid 1px $bor_color;}
     .bor_r{ border-right:solid 1px $bor_color;}
     .bor_b{ border-bottom:solid 1px $bor_color;}
     .bor_t0{ border-top:none!important;}
     .bor_l0{ border-left:none!important;}
     .bor_r0{ border-right:none!important;}
     .bor_b0{ border-bottom:none!important;}
     .bor_das{ border:1px dashed $bor_color;}
     .bor_dot{ border:1px dotted $bor_color;}
     .border{ border:1px solid $bor_color;}
     /* box */
     .content{ width: $content+$unit; margin:0 auto; }
 }

应用 index.scss:

 @charset "UTF-8";//解决中文注释问题;
 //引入底层库;
 @import "sass-base.scss";

 //默认初始化;
 @include base($content:1000);

 /*方法*/
 .f12{
     @include f(12);
 }

 /*css3圆角*/
 .border-radius{
     @include border-radius(5px);
 }

 /*css3过渡*/
 .transitions{
     @include tran();
 }

 /*css3旋转*/
 .rotate60{
     @include css3(transform,rotate(60deg));
 }

 /*旋转keyframes*/
 @include keyframes(rotates) {
    0% {
         #{$browser}transform:rotate(0deg);
     }
     100% {
         #{$browser}transform:rotate(360deg);
     }
 }

 /*引用旋转keyframes*/
 .keyframes-rotates{ @include css3(animation,starts 8s linear infinite .3s ); }

最后生成的css:

 @charset "UTF-8";
 /* 清楚标签默认样式  */
 html { margin:; padding:; border:; _background-image: url(n1othing.txt); }

 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:; padding:; border:; font-size: 100%; vertical-align: baseline; }

 ol, ul, li { list-style: none; }

 body { line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 12px; color: #333; }

 table, tr, th, td { border-collapse: collapse; margin:; padding:; font-size: 100%; vertical-align: baseline; }

 caption, th, td { text-align: left; font-weight: normal; float: none !important; }

 table, th, td, select, img, input, object { vertical-align: middle; }

 :focus { outline:; }

 input, select { margin:; }

 a { color: #005EA7; text-decoration: none; }

 a:hover { text-decoration: underline; }

 p, a, td { word-wrap: break-word; word-break: break-all; }

 img { border: none; vertical-align: top; }

 textarea { resize: none; border: 1px solid #ccc; }

 textarea:hover { border-color: #ccc; }

 input[type="text"], input[type="button"] { -webkit-appearance: none; border-radius:; font-family: 'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif; }

 input[type="text"] { border: solid 1px #ccc; border-radius:; }

 dfn { font-style: normal; font-family: Arial; }

 /* 默认浮动 */
 .fl { float: left; }

 .fr { float: right; }

 .clear { *zoom:; }
 .clear:after { content: ""; display: block; height:; clear: both; visibility: hidden; overflow: hidden; }

 /* 显示隐藏 */
 .hide { display: none; }

 .show { display: block; }

 /* 文本方向 */
 .tal { text-align: left; }

 .tar { text-align: right; }

 .tac { text-align: center; }

 /* 截取 */
 .over { overflow: hidden; }

 .ofv { overflow: visible !important; }

 /* 定位 */
 .abs { position: absolute; }

 .rel { position: relative; }

 /* 鼠标手势 */
 .cursor { cursor: pointer; }

 .def { cursor: default; }

 /* 。。。。 */
 .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

 /* 强制折行 */
 .break-word { word-break: break-all; /*支持IE，chrome，FF不支持*/ 　　word-wrap: break-word; /*支持IE，chrome，FF*/ }

 /* 默认颜色 */
 .colr-red { color: #ff546a; }

 .colr-blue { color: #5fb3d2; }

 .colr-gray { color: #ccc; }

 .colr-yellow { color: #fff000; }

 .colr-org { color: #f60; }

 /* 默认背景颜色 */
 .bg-red { background-color: #ff546a; }

 .bg-blue { background-color: #5fb3d2; }

 .bg-gray { background-color: #ccc; }

 .bg-yellow { background-color: #fff000; }

 .bg-org { background-color: #f60; }

 /* 默认置灰 */
 .disabled { background-color: #ccc; }

 /* 默认字体 */
 .f-12 { font-size: 12px; }

 .f-14 { font-size: 14px; }

 .f-16 { font-size: 16px; }

 .f-18 { font-size: 18px; }

 .f-20 { font-size: 20px; }

 .f-22 { font-size: 22px; }

 .f-24 { font-size: 24px; }

 .f-26 { font-size: 26px; }

 .f-28 { font-size: 28px; }

 .f-30 { font-size: 30px; }

 .f-32 { font-size: 32px; }

 /* margin  padding */
 .mt0 { margin-top: 0 !important; }

 .mt-5 { margin-top: 5px; }

 .mt-10 { margin-top: 10px; }

 .mt-15 { margin-top: 15px; }

 .mt-20 { margin-top: 20px; }

 .mt-25 { margin-top: 25px; }

 .mt-30 { margin-top: 30px; }

 .mb0 { margin-bottom: 0 !important; }

 .mb-5 { margin-bottom: 5px; }

 .mb-10 { margin-bottom: 10px; }

 .mb-15 { margin-bottom: 15px; }

 .mb-20 { margin-bottom: 20px; }

 .mb-25 { margin-bottom: 25px; }

 .mb-30 { margin-bottom: 30px; }

 .ml0 { margin-left: 0 !important; }

 .ml-5 { margin-left: 5px; }

 .ml-10 { margin-left: 10px; }

 .ml-15 { margin-left: 15px; }

 .ml-20 { margin-left: 20px; }

 .ml-25 { margin-left: 25px; }

 .ml-30 { margin-left: 30px; }

 .mr0 { margin-right: 0 !important; }

 .mr-5 { margin-right: 5px; }

 .mr-10 { margin-right: 10px; }

 .mr-15 { margin-right: 15px; }

 .mr-20 { margin-right: 20px; }

 .mr-25 { margin-right: 25px; }

 .mr-30 { margin-right: 30px; }

 /* 高度 */
 .blk-5 { height: 5px; }

 .blk-10 { height: 10px; }

 .blk-15 { height: 15px; }

 .blk-20 { height: 20px; }

 .blk-25 { height: 25px; }

 .blk-30 { height: 30px; }

 .blk-35 { height: 35px; }

 .blk-40 { height: 40px; }

 .blk-45 { height: 45px; }

 .blk-50 { height: 50px; }

 /* 边框 */
 .bor_t { border-top: solid 1px #ccc; }

 .bor_l { border-left: solid 1px #ccc; }

 .bor_r { border-right: solid 1px #ccc; }

 .bor_b { border-bottom: solid 1px #ccc; }

 .bor_t0 { border-top: none !important; }

 .bor_l0 { border-left: none !important; }

 .bor_r0 { border-right: none !important; }

 .bor_b0 { border-bottom: none !important; }

 .bor_das { border: 1px dashed #ccc; }

 .bor_dot { border: 1px dotted #ccc; }

 .border { border: 1px solid #ccc; }

 /* box */
 .content { width: 1000px; margin: 0 auto; }

 /*方法*/
 .f12 { font-size: 12px; }

 /*css3圆角*/
 .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; }

 /*css3过渡*/
 .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; }

 /*css3旋转*/
 .rotate60 { -webkit-transform: rotate(60deg); /* Safari 和 Chrome */ -moz-transform: rotate(60deg); /* Firefox 4 */ -o-transform: rotate(60deg); /* Opera */ transform: rotate(60deg); }

 /*旋转keyframes*/
 @-webkit-keyframes rotates { 0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); } }
 @-moz-keyframes rotates { 0% { -moz-transform: rotate(0deg); }
   100% { -moz-transform: rotate(360deg); } }
 @-ms-keyframes rotates { 0% { -ms-transform: rotate(0deg); }
   100% { -ms-transform: rotate(360deg); } }
 @-o-keyframes rotates { 0% { -o-transform: rotate(0deg); }
   100% { -o-transform: rotate(360deg); } }
 @keyframes rotates { 0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); } }
 /*引用旋转keyframes*/
 .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这个库,个人愚见从实战使用上也没多大用,不如自己写写还能加深语法使用,还有就是我没把css3属性一个个的单独拆出来是因为我记性不好。。。。记那么多Mixins,本身也只是加个前缀而已写一个通用Mixins加上就可以了所以才有css3Mixins通用~;