less/sass 基础base文件

less

less-base.less文件展示：

//清除标签默认样式;
.label(){
    html {margin: 0; padding: 0; border: 0;_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: 0; padding: 0; border: 0; 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: 0; padding: 0;  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: 0;}
    input,select{margin:0;}
    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: 0;font-family:'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif;}
    input[type="text"]{border:solid 1px #ccc; border-radius:0;}
    dfn {font-style: normal;font-family: Arial;}
}

.fl(){ float:left; } //左浮动;
.fr(){ float:right;} //右浮动;
//设置方向浮动;
.float( @dire : left ){
    float:@dire;
}
//清除浮动;
.clear(){
    *zoom:1;
    &:after{
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        overflow: hidden;
    }
}
//清右浮动;
.clr(){ 
    clear: both; 
    display: block; 
    font-size: 0; 
    height: 0; 
    line-height: 0; 
    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: 0;
  padding: 0;
  border: 0;
  _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: 0;
  padding: 0;
  border: 0;
  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: 0;
  padding: 0;
  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: 0;
}
input,
select {
  margin: 0;
}
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: 0;
  font-family: 'Microsoft Yahei', '黑体', Arial, Helvetica, sans-serif;
}
input[type="text"] {
  border: solid 1px #ccc;
  border-radius: 0;
}
dfn {
  font-style: normal;
  font-family: Arial;
}
/* 默认浮动 */
.fl {
  float: left;
}
.fr {
  float: right;
}
.clear {
  *zoom: 1;
}
/* 显示隐藏 */
.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: 0; padding: 0; border: 0;_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: 0; padding: 0; border: 0; 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: 0; padding: 0;  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: 0;}
    input,select{margin:0;}
    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: 0;font-family:'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif;}
    input[type="text"]{border:solid 1px #ccc; border-radius:0;}
    dfn {font-style: normal;font-family: Arial;}
}

//浮动;
@mixin fl{
    float:left;
}
@mixin fr{
   float:right;
}
@mixin float($dir:left){
    float:$dir;
}
//清除浮动;
@mixin clear(){
    *zoom:1;
    &:after{
        content: "";
        display: block;
        height: 0;
        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: 0; padding: 0; border: 0; _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: 0; padding: 0; border: 0; 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: 0; padding: 0; 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: 0; }

input, select { margin: 0; }

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: 0; font-family: 'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif; }

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

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

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

.fr { float: right; }

.clear { *zoom: 1; }
.clear:after { content: ""; display: block; height: 0; 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通用~;