常用的sass编译库

@charset "UTF-8";

/*引进图片合并给一个变量(后面会用到这个变量)*/
$sprites:sprite-map("pwd/*.png",$spacing:8px,$layout: vertical);

/*转换px到rem*/
$browser-default-font-size : 20px !default;
@function pxTorem($px){
    @if $px == 0{$px:0px}
    @return $px / $browser-default-font-size * 1rem;
}
@function pxTo2rem($px){
    @if $px == 0{$px:0px}
    @return $px / ($browser-default-font-size*2) * 1rem;
}

/*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
$media:ture;
@mixin iconItem($sprites,$name,$iE6:null){
    background-image:sprite-url($sprites);  //获取整个雪碧图路径
    background-repeat:no-repeat;
    @if $iE6 != null{ //null
        _background-image:sprite-url($iE6); //此处传进来的格式须是png8
    }
    $width:image-width(sprite-file($sprites,$name));  //sprite-file 获取目标图片
    $height:image-height(sprite-file($sprites,$name));  //获取目标图片
    $toalWidth:image-width(sprite-path($sprites));    //获取整张图的宽度
    $totalHeight:image-height(sprite-path($sprites));   //获取整张图的高度
    $widthHalf:ceil($width/2);                             //获取宽度的一半
    $heightHalf:ceil($height/2);                        //获取高度的一半
    //sprite-position 获取目标图的位置,nth操作数组
    $posX:round(nth(sprite-position($sprites,$name),1));  //获取沿x轴的位移
    $posY:round(nth(sprite-position($sprites, $name), 2));  //获取沿y轴的位移
    @if $media{//wap
        height:pxTorem($heightHalf);
        width:pxTorem($widthHalf);
        background-position: pxTo2rem($posX) pxTo2rem($posY);
        background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight);
    } @else{//PC
        height:$height;
        width:$width;
        background-position:sprite-position($sprites,$name);
    }
}
/*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin  timestampImg($imgUrl){
    background-image:image-url($imgUrl);
    background-repeat:no-repeat;
    $width:image-width($imgUrl);
    $height:image-height($imgUrl);
    @if $media{ //wap
        width:pxTo2rem($width);
        height:pxTo2rem($height);
        background-size:pxTo2rem($width) pxTo2rem($height);
    } @else{
        height:$height;
        width:$width;
    }
}
/*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin  base64Img($imgUrl){    //这里一定要分开写background  不然会引起background-size 与background合并引起手机端无法显示
    background-image:inline-image($imgUrl);
    background-repeat:no-repeat;
    $width:image-width($imgUrl);
    $height:image-height($imgUrl);
    @if $media{ //wap
        width:pxTo2rem($width);
        height:pxTo2rem($height);
        background-size:pxTo2rem($width) pxTo2rem($height);
    } @else{
        height:$height;
        width:$width;
    }
}

//圆角
@mixin boradius($size){
    -webkit-border-radius:$size;
    -moz-border-radius:$size;
    -o-border-radius:$size;
    -ms-border-radius:$size;
    border-radius:$size;
}
%box{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
%inlineb{display:inline-block;}
%block{display:block;}

//绝对居中
@mixin  pscenter($width,$height){
    width:$width;
    height:$height;
    position:absolute;
    left:50%;
    top:50%;
    margin:(-$height/2) 0 0 (-$width/2)
}
// 文字隐藏
%text_indent {
    font-size: 0;
    color: rgba(0,0,0,0);
    text-indent: -9999em;
    overflow: hidden;
}

// 文字自动换行
%text_break {
    word-break: break-all;
}

// 文字省略：单行
%text_oneline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// 文字省略：两行
%text_twoline {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

// 文字省略：自定义多行
@mixin elli($elli) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $elli;
    -webkit-box-orient: vertical;
}

// flex 布局
%box {
    display: box;
    display: -ms-box;
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
}
%flex {
    display: block;
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    box-flex: 1;
    -ms-box-flex: 1;
    -webkit-box-flex: 1;
}

// 清除表单样式
%input_clear {
    border: none;
    background: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

// 固定定位条
%fixedBar {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}



/* ************************全局模块样式************************** */
* {
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

img {
  border: 0 none;
  vertical-align: top;
}
a img{border:0 none}
i, em {
  font-style: normal;
}

ol, ul {
  list-style: none;
}

input, select, button,textarea, h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-family: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a, a:visited {
  text-decoration: none;
  color: #333;
}
a:focus{
    outline:0;
}
html,body{font-size:$browser-default-font-size;height:100%; }
body {
  margin: 0 auto;
  min-width: 320px;
  max-width: 640px;
  background: #fff;
  // font-size: 14px;
  font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;
  line-height: 1.5;
  color: #666;
  -webkit-text-size-adjust: 100% !important;
  -webkit-user-select: none;
  user-select: none;
}
.g_cf:after{
    display:block;
    content:'\20';
    clear:both;
    height:0;
    visibility:hidden;
}
input{-webkit-appearance: none;}
.g_cf{
    *zoom:1;
    overflow:hidden
}
.g_h10{height:pxTo2rem(10px);}
.g_h20{height:pxTo2rem(20px);}
.g_h30{height:pxTo2rem(30px);}
.g_h35{height:pxTo2rem(35px)}
.g_h100{height:pxTo2rem(100px)}

 扩展:

　@content：在sass3.2.0中引入， 可以用来解决css3中 @meidia 或者 @keyframes 带来的问题。它可以使@mixin接受一整块样式，接收的样式从@content开始

//sass 样式               
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css 编译后样式
@media only screen and (max-width: 480px) {
  body { color: red }
}

  使用@content解决@keyframes关键帧的浏览器前缀问题

// 初始化变量
$browser: null;
// 设置关键帧
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$name} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$name} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$name} {
        $browser: ''; @content;
    }
}

// 引入
@include keyframes(scale) {
    100% {
        #{$browser}transform: scale(0.8);
    }
}

// css编译后
@-webkit-keyframes scale {
    -webkit-transform: scale(0.8);
}
@-moz-keyframes scale  {
   -moz-transform: scale(0.8);
}
@-o-keyframes scale  {
    -o-transform: scale(0.8);
}
@keyframes scale  {
    transform: scale(0.8);
}

 

 

我的常用sass工具库（移动端）：

@charset "UTF-8";

/*引进图片合并给一个变量(后面会用到这个变量)*/
$sprites:sprite-map("qqvip/*.png",$spacing:8px,$layout: vertical);

/*转换px到rem*/
$browser-default-font-size : 20px !default;
@function pxTorem($px){
    @if $px == 0{$px:0px}
    @return $px / $browser-default-font-size * 1rem;
}
@function pxTo2rem($px){
    @if $px == 0{$px:0px}
    @return $px / ($browser-default-font-size*2) * 1rem;
}

// 初始化变量
$browser: null;
// 设置关键帧
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$name} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$name} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$name} {
        $browser: ''; @content;
    }
}

/*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
$media:ture;
@mixin iconItem($sprites,$name,$iE6:null){
    background:sprite-url($sprites) no-repeat;  //获取整个雪碧图路径
    @if $iE6 != null{ //null
        _background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8
    }
    $width:image-width(sprite-file($sprites,$name));  //sprite-file 获取目标图片
    $height:image-height(sprite-file($sprites,$name));  //获取目标图片
    $toalWidth:image-width(sprite-path($sprites));    //获取整张图的宽度
    $totalHeight:image-height(sprite-path($sprites));   //获取整张图的高度
    $widthHalf:ceil($width/2);                             //获取宽度的一半
    $heightHalf:ceil($height/2);                        //获取高度的一半
    //sprite-position 获取目标图的位置,nth操作数组
    $posX:round(nth(sprite-position($sprites,$name),1));  //获取沿x轴的位移
    $posY:round(nth(sprite-position($sprites, $name), 2));  //获取沿y轴的位移
    @if $media{//wap
        height:pxTorem($heightHalf);
        width:pxTorem($widthHalf);
        background-position: pxTo2rem($posX) pxTo2rem($posY);
        background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight);
    } @else{//PC
        height:$height;
        width:$width;
        background-position:sprite-position($sprites,$name);
    }
}
/*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin  timestampImg($imgUrl){
    background:image-url($imgUrl) no-repeat;
    $width:image-width($imgUrl);
    $height:image-height($imgUrl);
    @if $media{ //wap
        width:pxTo2rem($width);
        height:pxTo2rem($height);
        background-size:pxTo2rem($width) pxTo2rem($height);
    } @else{
        height:$height;
        width:$width;
    }
}
/*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin  base64Img($imgUrl){
    background-image:inline-image($imgUrl);
    background-repeat:no-repeat;
    $width:image-width($imgUrl);
    $height:image-height($imgUrl);
    @if $media{ //wap
        width:pxTo2rem($width);
        height:pxTo2rem($height);
        background-size:pxTo2rem($width) pxTo2rem($height);
    } @else{
        height:$height;
        width:$width;
    }
}

//圆角
@mixin boradius($size){
    -webkit-border-radius:$size;
    -moz-border-radius:$size;
    -o-border-radius:$size;
    -ms-border-radius:$size;
    border-radius:$size;
}
%box{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
%inlineb{display:inline-block;}
%block{display:block;}

//绝对居中
@mixin  pscenter($width,$height){
    width:$width;
    height:$height;
    position:absolute;
    left:50%;
    top:50%;
    margin:(-$height/2) 0 0 (-$width/2)
}

// 文字省略：单行
%text_oneline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// 文字省略：两行
%text_twoline {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

// 文字省略：自定义多行
@mixin elli($elli) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $elli;
    -webkit-box-orient: vertical;
}

// flex 布局
%boxflex {
    display: box;
    display: -ms-box;
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
}
%flex {
    display: block;
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    box-flex: 1;
    -ms-box-flex: 1;
    -webkit-box-flex: 1;
}

// 清除表单样式
%input_clear {
    border: none;
    background: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

// 固定定位条
%fixedBar {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}



/* ************************全局模块样式************************** */
* {
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
body{background:#EAEAEA}
img {
  border: 0 none;
  vertical-align: top;
}
a img{border:0 none}
i, em {
  font-style: normal;
}

ol, ul {
  list-style: none;
}

input, select, button,textarea, h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-family: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a, a:visited {
  text-decoration: none;
  color: #333;
}
a:focus{
    outline:0;
}
html,body{font-size:$browser-default-font-size;height:100%; }
body {
  margin: 0 auto;
  min-width: 320px;
  max-width: 640px;
  background: #eaeef2;
  // font-size: 14px;
  font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;
  line-height: 1.5;
  color: #666;
  -webkit-text-size-adjust: 100% !important;
  -webkit-user-select: none;
  user-select: none;
}

.g_cf:after{
    display:block;
    content:'\20';
    clear:both;
    height:0;
    visibility:hidden;
}
input{-webkit-appearance: none;}
.g_cf{
    *zoom:1;
    *overflow:hidden
}
.hide{display:none};
.display{display:block};
.g_h5{height:pxTo2rem(5px);}
.g_h10{height:pxTo2rem(10px);}
.g_h10{height:pxTo2rem(10px);}
.g_h15{height:pxTo2rem(15px);}
.g_h20{height:pxTo2rem(20px);}
.g_h25{height:pxTo2rem(25px);}
.g_h30{height:pxTo2rem(30px);}
.g_h35{height:pxTo2rem(35px)}
.g_h40{height:pxTo2rem(40px);}
.g_h50{height:pxTo2rem(50px)}
.g_h70{height:pxTo2rem(70px)}
.g_h100{height:pxTo2rem(100px)}
.g_h130{height:pxTo2rem(130px)}

.fs2_6{color:#666;font-size: pxTo2rem(20px)}
.fs25_6{color:#666;font-size: pxTo2rem(25px)}
.fs2_9{color:#999;font-size: pxTo2rem(20px)}

我的常用sass库，不用rem，用px em库：

@charset "UTF-8";
@import 'mod_border';
/*引进图片合并给一个变量(后面会用到这个变量)*/
$sprites:sprite-map("icon/*.png",$spacing:8px,$layout: vertical);

/*转换px到rem*/
$browser-default-font-size : 16px !default;
/***640下2倍px 转换为 1倍px**/
@function pxTo($px){
  @if $px == 0{$px:0px}
  @return $px / 2;
}
/***转换为em**/
@function pxToem($px){
  @if $px == 0{$px:0px}
  @return $px / $browser-default-font-size * 1em;
}

@function pxTo2em($px){
  @if $px == 0{$px:0px}
  @return $px / ($browser-default-font-size*2) * 1em;
}
// 初始化变量
$browser: null;
// 设置关键帧
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$name} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$name} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$name} {
        $browser: ''; @content;
    }
}

/*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
$media:ture;
@mixin iconItem($sprites,$name,$iE6:null){
  background:sprite-url($sprites) no-repeat;  //获取整个雪碧图路径
  @if $iE6 != null{ //null
    _background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8
  }
  $width:image-width(sprite-file($sprites,$name));  //sprite-file 获取目标图片
  $height:image-height(sprite-file($sprites,$name));  //获取目标图片
  $toalWidth:image-width(sprite-path($sprites));    //获取整张图的宽度
  $totalHeight:image-height(sprite-path($sprites));   //获取整张图的高度
  $widthHalf:ceil($width/2);               //获取宽度的一半
  $heightHalf:ceil($height/2);            //获取高度的一半
  //sprite-position 获取目标图的位置,nth操作数组
  $posX:round(nth(sprite-position($sprites,$name),1));  //获取沿x轴的位移
  $posY:round(nth(sprite-position($sprites, $name), 2));  //获取沿y轴的位移
  @if $media{//wap
    height:$heightHalf;
    width:$widthHalf;
    background-position: $posX/2 $posY/2;
    background-size:$toalWidth/2 $totalHeight/2;
  } @else{//PC
    height:$height;
    width:$width;
    background-position:sprite-position($sprites,$name);
  }
}
/*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin  timestampImg($imgUrl){
  background:image-url($imgUrl) no-repeat;
  $width:image-width($imgUrl);
  $height:image-height($imgUrl);
  @if $media{ //wap
    width:$width/2;
    height:$height/2;
    background-size:$width/2 $height/2;
  } @else{
    height:$height;
    width:$width;
  }
}
/*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin  base64Img($imgUrl){
  background-image:inline-image($imgUrl);
  background-repeat:no-repeat;
  $width:image-width($imgUrl);
  $height:image-height($imgUrl);
  @if $media{ //wap
    width:$width/2;
    height:$height/2;
    background-size:$width/2 $height/2;
  } @else{
    height:$height;
    width:$width;
  }
}
@mixin size($width, $height:false){
  @if not $height {
    $height : $width;
  }
  width: $width + px;
  height: $height + px ; 
   
} 
//圆角
@mixin boradius($size){
  -webkit-border-radius:$size;
  -moz-border-radius:$size;
  -o-border-radius:$size;
  -ms-border-radius:$size;
  border-radius:$size;
}
@mixin border-radius($size){
  -webkit-border-radius:$size;
  -moz-border-radius:$size;
  -o-border-radius:$size;
  -ms-border-radius:$size;
  border-radius:$size;
}
%boxSize{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
%inlineb{display:inline-block;}
%block{display:block;}

//绝对居中
@mixin  pscenter($width,$height){
  width:$width;
  height:$height;
  position:absolute;
  left:50%;
  top:50%;
  margin:(-$height/2) 0 0 (-$width/2)
}

// 文字省略：单行
%text_oneline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// 文字省略：两行
%text_twoline {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

// 文字省略：自定义多行
@mixin elli($elli) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $elli;
    -webkit-box-orient: vertical;
}

// flex 布局
%box{
    display: box;
    display: -ms-box;
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;  
}
%boxflex {
    display: box;
    display: -ms-box;
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
}
%flex {
    display: block;
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    box-flex: 1;
    -ms-box-flex: 1;
    -webkit-box-flex: 1;
}

// 清除表单样式
%input_clear {
    border: none;
    background: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

// 固定定位条
%fixedBar {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

@mixin center($width, $height){
  width: $width + px;
  height: $height + px ;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: $width / (-2) + px;
  margin-top: $height / (-2) + px;
}

/* ************************全局模块样式************************** */
* {
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
body{background:#EAEAEA}
img {
  border: 0 none;
  vertical-align: top;
}
a img{border:0 none}
i, em {
  font-style: normal;
}

ol, ul {
  list-style: none;
}

input, select, button,textarea, h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-family: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a, a:visited {
  text-decoration: none;
  color: #333;
}
a:focus{
  outline:0;
}
html,body{font-size:$browser-default-font-size;height:100%; }
body {
  margin: 0 auto;
  min-width: 320px;
  max-width: 640px;
  background: #fff;
  // font-size: 14px;
  font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;
  line-height: 1.5;
  color: #666;
  -webkit-text-size-adjust: 100% !important;
  -webkit-user-select: none;
  user-select: none;
}

.g_cf:after{
    display:block;
    content:'\20';
    clear:both;
    height:0;
    visibility:hidden;
}
input{-webkit-appearance: none;}
.g_cf{
    *zoom:1;
    *overflow:hidden
}
.hide{display:none};
.display{display:block};pxTo2em
.g_h5{height:pxTo2em(5px);}
.g_h10{height:pxTo2em(10px);}
.g_h10{height:pxTo2em(10px);}
.g_h15{height:pxTo2em(15px);}
.g_h20{height:pxTo2em(20px);}
.g_h25{height:pxTo2em(25px);}
.g_h30{height:pxTo2em(30px);}
.g_h35{height:pxTo2em(35px)}
.g_h40{height:pxTo2em(40px);}
.g_h50{height:pxTo2em(50px)}
.g_h70{height:pxTo2em(70px)}
.g_h100{height:pxTo2em(100px)}
.g_h130{height:pxTo2em(130px)}

.fs2_6{color:#666;font-size: pxTo2rem(20px)}
.fs25_6{color:#666;font-size: pxTo2rem(25px)}
.fs2_9{color:#999;font-size: pxTo2rem(20px)}


.cl_666{color:#666 !important;}
.red{color:red !important}

.bd_top_no{border-top:none !important}

 

我的常用sass工具库（pc端）：

@charset "utf-8";

/*引进图片合并给一个变量(后面会用到这个变量)*/
$sprites1:sprite-map("cloud/*.png",$spacing:10px,$layout: vertical);

/*转换px到rem*/
$browser-default-font-size : 20px !default;
@function pxTorem($px){
    @if $px == 0{$px:0px}
    @return $px / $browser-default-font-size * 1rem;
}
@function pxTo2rem($px){
    @if $px == 0{$px:0px}
    @return $px / ($browser-default-font-size*2) * 1rem;
}

/*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
$media:false;
@mixin iconItem($sprites,$name,$iE6:null){
    background:sprite-url($sprites) no-repeat;  //获取整个雪碧图路径
    @if $iE6 != null{ //null
        _background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8
    }
    $width:image-width(sprite-file($sprites,$name));  //sprite-file 获取目标图片
    $height:image-height(sprite-file($sprites,$name));  //获取目标图片
    $toalWidth:image-width(sprite-path($sprites));    //获取整张图的宽度
    $totalHeight:image-height(sprite-path($sprites));   //获取整张图的高度
    $widthHalf:ceil($width/2);                             //获取宽度的一半
    $heightHalf:ceil($height/2);                        //获取高度的一半
    //sprite-position 获取目标图的位置,nth操作数组
    $posX:round(nth(sprite-position($sprites,$name),1));  //获取沿x轴的位移
    $posY:round(nth(sprite-position($sprites, $name), 2));  //获取沿y轴的位移
    @if $media{//wap
        height:pxTorem($heightHalf);
        width:pxTorem($widthHalf);
        font:$posX;
        font:$posY;
        background-position: pxTo2rem($posX) pxTo2rem($posY);
        background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight);
    } @else{//PC
        height:$height;
        width:$width;
        background-position:sprite-position($sprites,$name);
    }
}
/*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin  timestampImg($imgUrl){
    background:image-url($imgUrl) no-repeat;
    $width:image-width($imgUrl);
    $height:image-height($imgUrl);
    @if $media{ //wap
        width:pxTo2rem($width);
        height:pxTo2rem($height);
        background-size:pxTo2rem($width) pxTo2rem($height);
    } @else{
        height:$height;
        width:$width;
    }
}
/*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin  base64Img($imgUrl){
    background:inline-image($imgUrl) no-repeat;
    $width:image-width($imgUrl);
    $height:image-height($imgUrl);
    @if $media{ //wap
        width:pxTo2rem($width);
        height:pxTo2rem($height);
        background-size:pxTo2rem($width) pxTo2rem($height);
    } @else{
        height:$height;
        width:$width;
    }
}

@mixin boradius($size){
    -webkit-border-radius:$size;
    -moz-border-radius:$size;
    -o-border-radius:$size;
    -ms-border-radius:$size;
    border-radius:$size;
}
%box{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
%inlineb{display:inline-block;}
%block{display:block;}
//绝对居中
@mixin  pscenter($width,$height){
    width:$width;
    height:$height;
    position:absolute;
    left:50%;
    top:50%;
    margin:(-$height/2) 0 0 (-$width/2)
}

/*******************基础样式*******************/
/*\5FAE\8F6F\96C5\9ED1 微软雅黑  '\5b8b\4f53'宋体*/
html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    padding: 0;
    margin: 0
}
html,body{font:12px/1.5 '\5FAE\8F6F\96C5\9ED1','\5b8b\4f53',sans-serif,arial;}
img {
    border:0 none;
}
ul, ol {
    list-style: none
}
input, textarea, select, button {
    resize: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    outline: none;
    font:12px/1.5 '\5FAE\8F6F\96C5\9ED1','\5b8b\4f53',sans-serif,arial;
}
button, input[type="button"], input[type=submit], input[type=reset] {
    cursor:pointer;
    border:0 none;
}
input[type="text"]{
    color:#ccc
}
select{color:#333}
input[type="search"] {
    -webkit-appearance:textfield
}
/* ie6 ie7去除text产生的蓝色边框 */
 input[type=submit], input[type=reset] {
    filter:chroma(color=#000000);
}
//关闭ie10里面的叉
input:-ms-clear{display:none;}
a img {
    bord:0 none;
}
a{
    outline:none;
    text-decoration:none; 
    -webkit-tap-highlight-color:rgba(255,0,0,0);
    blr:expression(this.onFocus=this.blur());
}
a:focus{
    outline:0;
}
.g_cf:after{
    display:block;
    content:'\20';
    clear:both;
    height:0;
    visibility:hidden;
}

.g_cf{
    *zoom:1;
    overflow:hidden
}
.g_h5{height:5px}
.g_h10{height:10px}
.g_h15{height:15px}
.g_h20{height:20px}
.g_h30{height:30px}
.g_h40{height:40px}
.g_h100{height:100px}