1. @charset "UTF-8";
  2.  
  3. /*引进图片合并给一个变量(后面会用到这个变量)*/
  4. $sprites:sprite-map("pwd/*.png",$spacing:8px,$layout: vertical);
  5.  
  6. /*转换px到rem*/
  7. $browser-default-font-size : 20px !default;
  8. @function pxTorem($px){
  9.     @if $px == {$px:0px}
  10.     @return $px / $browser-default-font-size * 1rem;
  11. }
  12. @function pxTo2rem($px){
  13.     @if $px == {$px:0px}
  14.     @return $px / ($browser-default-font-size*) * 1rem;
  15. }
  16.  
  17. /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
  18. $media:ture;
  19. @mixin iconItem($sprites,$name,$iE6:null){
  20.     background-image:sprite-url($sprites);  //获取整个雪碧图路径
  21.     background-repeat:no-repeat;
  22.     @if $iE6 != null{ //null
  23.         _background-image:sprite-url($iE6); //此处传进来的格式须是png8
  24.     }
  25.     $width:image-width(sprite-file($sprites,$name));  //sprite-file 获取目标图片
  26.     $height:image-height(sprite-file($sprites,$name));  //获取目标图片
  27.     $toalWidth:image-width(sprite-path($sprites));    //获取整张图的宽度
  28.     $totalHeight:image-height(sprite-path($sprites));   //获取整张图的高度
  29.     $widthHalf:ceil($width/);                             //获取宽度的一半
  30.     $heightHalf:ceil($height/);                        //获取高度的一半
  31.     //sprite-position 获取目标图的位置,nth操作数组
  32.     $posX:round(nth(sprite-position($sprites,$name),));  //获取沿x轴的位移
  33.     $posY:round(nth(sprite-position($sprites, $name), ));  //获取沿y轴的位移
  34.     @if $media{//wap
  35.         height:pxTorem($heightHalf);
  36.         width:pxTorem($widthHalf);
  37.         background-position: pxTo2rem($posX) pxTo2rem($posY);
  38.         background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight);
  39.     } @else{//PC
  40.         height:$height;
  41.         width:$width;
  42.         background-position:sprite-position($sprites,$name);
  43.     }
  44. }
  45. /*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
  46. @mixin  timestampImg($imgUrl){
  47.     background-image:image-url($imgUrl);
  48.     background-repeat:no-repeat;
  49.     $width:image-width($imgUrl);
  50.     $height:image-height($imgUrl);
  51.     @if $media{ //wap
  52.         width:pxTo2rem($width);
  53.         height:pxTo2rem($height);
  54.         background-size:pxTo2rem($width) pxTo2rem($height);
  55.     } @else{
  56.         height:$height;
  57.         width:$width;
  58.     }
  59. }
  60. /*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
  61. @mixin  base64Img($imgUrl){    //这里一定要分开写background  不然会引起background-size 与background合并引起手机端无法显示
  62.     background-image:inline-image($imgUrl);
  63.     background-repeat:no-repeat;
  64.     $width:image-width($imgUrl);
  65.     $height:image-height($imgUrl);
  66.     @if $media{ //wap
  67.         width:pxTo2rem($width);
  68.         height:pxTo2rem($height);
  69.         background-size:pxTo2rem($width) pxTo2rem($height);
  70.     } @else{
  71.         height:$height;
  72.         width:$width;
  73.     }
  74. }
  75.  
  76. //圆角
  77. @mixin boradius($size){
  78.     -webkit-border-radius:$size;
  79.     -moz-border-radius:$size;
  80.     -o-border-radius:$size;
  81.     -ms-border-radius:$size;
  82.     border-radius:$size;
  83. }
  84. %box{
  85.     -webkit-box-sizing: border-box;
  86.     box-sizing: border-box;
  87. }
  88. %inlineb{display:inline-block;}
  89. %block{display:block;}
  90.  
  91. //绝对居中
  92. @mixin  pscenter($width,$height){
  93.     width:$width;
  94.     height:$height;
  95.     position:absolute;
  96.     left:%;
  97.     top:%;
  98.     margin:(-$height/)   (-$width/)
  99. }
  100. // 文字隐藏
  101. %text_indent {
  102.     font-size: ;
  103.     color: rgba(,,,);
  104.     text-indent: -9999em;
  105.     overflow: hidden;
  106. }
  107.  
  108. // 文字自动换行
  109. %text_break {
  110.     word-break: break-all;
  111. }
  112.  
  113. // 文字省略：单行
  114. %text_oneline {
  115.     white-space: nowrap;
  116.     overflow: hidden;
  117.     text-overflow: ellipsis;
  118. }
  119.  
  120. // 文字省略：两行
  121. %text_twoline {
  122.     overflow: hidden;
  123.     text-overflow: ellipsis;
  124.     display: -webkit-box;
  125.     -webkit-line-clamp: ;
  126.     -webkit-box-orient: vertical;
  127. }
  128.  
  129. // 文字省略：自定义多行
  130. @mixin elli($elli) {
  131.     overflow: hidden;
  132.     text-overflow: ellipsis;
  133.     display: -webkit-box;
  134.     -webkit-line-clamp: $elli;
  135.     -webkit-box-orient: vertical;
  136. }
  137.  
  138. // flex 布局
  139. %box {
  140.     display: box;
  141.     display: -ms-box;
  142.     display: -webkit-box;
  143.     display: flex;
  144.     display: -ms-flexbox;
  145.     display: -webkit-flex;
  146. }
  147. %flex {
  148.     display: block;
  149.     flex: ;
  150.     -ms-flex: ;
  151.     -webkit-flex: ;
  152.     box-flex: ;
  153.     -ms-box-flex: ;
  154.     -webkit-box-flex: ;
  155. }
  156.  
  157. // 清除表单样式
  158. %input_clear {
  159.     border: none;
  160.     background: none;
  161.     -webkit-appearance: none;
  162.     -webkit-border-radius: ;
  163. }
  164.  
  165. // 固定定位条
  166. %fixedBar {
  167.     position: fixed;
  168.     left: ;
  169.     right: ;
  170.     width: %;
  171. }
  172.  
  173. /* ************************全局模块样式************************** */
  174. * {
  175.   -webkit-tap-highlight-color: transparent;
  176.   outline: ;
  177. }
  178.  
  179. 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 {
  180.   margin: ;
  181.   padding: ;
  182.   vertical-align: baseline;
  183. }
  184.  
  185. img {
  186.   border:  none;
  187.   vertical-align: top;
  188. }
  189. a img{border: none}
  190. i, em {
  191.   font-style: normal;
  192. }
  193.  
  194. ol, ul {
  195.   list-style: none;
  196. }
  197.  
  198. input, select, button,textarea, h1, h2, h3, h4, h5, h6 {
  199.   font-size: %;
  200.   font-family: inherit;
  201. }
  202.  
  203. table {
  204.   border-collapse: collapse;
  205.   border-spacing: ;
  206. }
  207.  
  208. a, a:visited {
  209.   text-decoration: none;
  210.   color: #;
  211. }
  212. a:focus{
  213.     outline:;
  214. }
  215. html,body{font-size:$browser-default-font-size;height:%; }
  216. body {
  217.   margin:  auto;
  218.   min-width: 320px;
  219.   max-width: 640px;
  220.   background: #fff;
  221.   // font-size: 14px;
  222.   font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;
  223.   line-height: 1.5;
  224.   color: #;
  225.   -webkit-text-size-adjust: % !important;
  226.   -webkit-user-select: none;
  227.   user-select: none;
  228. }
  229. .g_cf:after{
  230.     display:block;
  231.     content:'\20';
  232.     clear:both;
  233.     height:;
  234.     visibility:hidden;
  235. }
  236. input{-webkit-appearance: none;}
  237. .g_cf{
  238.     *zoom:;
  239.     overflow:hidden
  240. }
  241. .g_h10{height:pxTo2rem(10px);}
  242. .g_h20{height:pxTo2rem(20px);}
  243. .g_h30{height:pxTo2rem(30px);}
  244. .g_h35{height:pxTo2rem(35px)}
  245. .g_h100{height:pxTo2rem(100px)}

扩展:

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

  1. //sass 样式
  2. @mixin max-screen($res){
  3.   @media only screen and ( max-width: $res )
  4.   {
  5.     @content;
  6.   }
  7. }
  8.  
  9. @include max-screen(480px) {
  10.   body { color: red }
  11. }
  12.  
  13. //css 编译后样式
  14. @media only screen and (max-width: 480px) {
  15.   body { color: red }
  16. }

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

  1. // 初始化变量
  2. $browser: null;
  3. // 设置关键帧
  4. @mixin keyframes($name) {
  5.     @-webkit-keyframes #{$name} {
  6.         $browser: '-webkit-'; @content;
  7.     }
  8.     @-moz-keyframes #{$name} {
  9.         $browser: '-moz-'; @content;
  10.     }
  11.     @-o-keyframes #{$name} {
  12.         $browser: '-o-'; @content;
  13.     }
  14.     @keyframes #{$name} {
  15.         $browser: ''; @content;
  16.     }
  17. }
  18.  
  19. // 引入
  20. @include keyframes(scale) {
  21.     % {
  22.         #{$browser}transform: scale(0.8);
  23.     }
  24. }
  25.  
  26. // css编译后
  27. @-webkit-keyframes scale {
  28.     -webkit-transform: scale(0.8);
  29. }
  30. @-moz-keyframes scale  {
  31.    -moz-transform: scale(0.8);
  32. }
  33. @-o-keyframes scale  {
  34.     -o-transform: scale(0.8);
  35. }
  36. @keyframes scale  {
  37.     transform: scale(0.8);
  38. }

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

  1. @charset "UTF-8";
  2.  
  3. /*引进图片合并给一个变量(后面会用到这个变量)*/
  4. $sprites:sprite-map("qqvip/*.png",$spacing:8px,$layout: vertical);
  5.  
  6. /*转换px到rem*/
  7. $browser-default-font-size : 20px !default;
  8. @function pxTorem($px){
  9.     @if $px == {$px:0px}
  10.     @return $px / $browser-default-font-size * 1rem;
  11. }
  12. @function pxTo2rem($px){
  13.     @if $px == {$px:0px}
  14.     @return $px / ($browser-default-font-size*) * 1rem;
  15. }
  16.  
  17. // 初始化变量
  18. $browser: null;
  19. // 设置关键帧
  20. @mixin keyframes($name) {
  21.     @-webkit-keyframes #{$name} {
  22.         $browser: '-webkit-'; @content;
  23.     }
  24.     @-moz-keyframes #{$name} {
  25.         $browser: '-moz-'; @content;
  26.     }
  27.     @-o-keyframes #{$name} {
  28.         $browser: '-o-'; @content;
  29.     }
  30.     @keyframes #{$name} {
  31.         $browser: ''; @content;
  32.     }
  33. }
  34.  
  35. /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
  36. $media:ture;
  37. @mixin iconItem($sprites,$name,$iE6:null){
  38.     background:sprite-url($sprites) no-repeat;  //获取整个雪碧图路径
  39.     @if $iE6 != null{ //null
  40.         _background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8
  41.     }
  42.     $width:image-width(sprite-file($sprites,$name));  //sprite-file 获取目标图片
  43.     $height:image-height(sprite-file($sprites,$name));  //获取目标图片
  44.     $toalWidth:image-width(sprite-path($sprites));    //获取整张图的宽度
  45.     $totalHeight:image-height(sprite-path($sprites));   //获取整张图的高度
  46.     $widthHalf:ceil($width/);                             //获取宽度的一半
  47.     $heightHalf:ceil($height/);                        //获取高度的一半
  48.     //sprite-position 获取目标图的位置,nth操作数组
  49.     $posX:round(nth(sprite-position($sprites,$name),));  //获取沿x轴的位移
  50.     $posY:round(nth(sprite-position($sprites, $name), ));  //获取沿y轴的位移
  51.     @if $media{//wap
  52.         height:pxTorem($heightHalf);
  53.         width:pxTorem($widthHalf);
  54.         background-position: pxTo2rem($posX) pxTo2rem($posY);
  55.         background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight);
  56.     } @else{//PC
  57.         height:$height;
  58.         width:$width;
  59.         background-position:sprite-position($sprites,$name);
  60.     }
  61. }
  62. /*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
  63. @mixin  timestampImg($imgUrl){
  64.     background:image-url($imgUrl) no-repeat;
  65.     $width:image-width($imgUrl);
  66.     $height:image-height($imgUrl);
  67.     @if $media{ //wap
  68.         width:pxTo2rem($width);
  69.         height:pxTo2rem($height);
  70.         background-size:pxTo2rem($width) pxTo2rem($height);
  71.     } @else{
  72.         height:$height;
  73.         width:$width;
  74.     }
  75. }
  76. /*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
  77. @mixin  base64Img($imgUrl){
  78.     background-image:inline-image($imgUrl);
  79.     background-repeat:no-repeat;
  80.     $width:image-width($imgUrl);
  81.     $height:image-height($imgUrl);
  82.     @if $media{ //wap
  83.         width:pxTo2rem($width);
  84.         height:pxTo2rem($height);
  85.         background-size:pxTo2rem($width) pxTo2rem($height);
  86.     } @else{
  87.         height:$height;
  88.         width:$width;
  89.     }
  90. }
  91.  
  92. //圆角
  93. @mixin boradius($size){
  94.     -webkit-border-radius:$size;
  95.     -moz-border-radius:$size;
  96.     -o-border-radius:$size;
  97.     -ms-border-radius:$size;
  98.     border-radius:$size;
  99. }
  100. %box{
  101.     -webkit-box-sizing: border-box;
  102.     box-sizing: border-box;
  103. }
  104. %inlineb{display:inline-block;}
  105. %block{display:block;}
  106.  
  107. //绝对居中
  108. @mixin  pscenter($width,$height){
  109.     width:$width;
  110.     height:$height;
  111.     position:absolute;
  112.     left:%;
  113.     top:%;
  114.     margin:(-$height/)   (-$width/)
  115. }
  116.  
  117. // 文字省略：单行
  118. %text_oneline {
  119.     white-space: nowrap;
  120.     overflow: hidden;
  121.     text-overflow: ellipsis;
  122. }
  123.  
  124. // 文字省略：两行
  125. %text_twoline {
  126.     overflow: hidden;
  127.     text-overflow: ellipsis;
  128.     display: -webkit-box;
  129.     -webkit-line-clamp: ;
  130.     -webkit-box-orient: vertical;
  131. }
  132.  
  133. // 文字省略：自定义多行
  134. @mixin elli($elli) {
  135.     overflow: hidden;
  136.     text-overflow: ellipsis;
  137.     display: -webkit-box;
  138.     -webkit-line-clamp: $elli;
  139.     -webkit-box-orient: vertical;
  140. }
  141.  
  142. // flex 布局
  143. %boxflex {
  144.     display: box;
  145.     display: -ms-box;
  146.     display: -webkit-box;
  147.     display: flex;
  148.     display: -ms-flexbox;
  149.     display: -webkit-flex;
  150. }
  151. %flex {
  152.     display: block;
  153.     flex: ;
  154.     -ms-flex: ;
  155.     -webkit-flex: ;
  156.     box-flex: ;
  157.     -ms-box-flex: ;
  158.     -webkit-box-flex: ;
  159. }
  160.  
  161. // 清除表单样式
  162. %input_clear {
  163.     border: none;
  164.     background: none;
  165.     -webkit-appearance: none;
  166.     -webkit-border-radius: ;
  167. }
  168.  
  169. // 固定定位条
  170. %fixedBar {
  171.     position: fixed;
  172.     left: ;
  173.     right: ;
  174.     width: %;
  175. }
  176.  
  177. /* ************************全局模块样式************************** */
  178. * {
  179.   -webkit-tap-highlight-color: transparent;
  180.   outline: ;
  181. }
  182.  
  183. 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 {
  184.   margin: ;
  185.   padding: ;
  186.   vertical-align: baseline;
  187. }
  188. body{background:#EAEAEA}
  189. img {
  190.   border:  none;
  191.   vertical-align: top;
  192. }
  193. a img{border: none}
  194. i, em {
  195.   font-style: normal;
  196. }
  197.  
  198. ol, ul {
  199.   list-style: none;
  200. }
  201.  
  202. input, select, button,textarea, h1, h2, h3, h4, h5, h6 {
  203.   font-size: %;
  204.   font-family: inherit;
  205. }
  206.  
  207. table {
  208.   border-collapse: collapse;
  209.   border-spacing: ;
  210. }
  211.  
  212. a, a:visited {
  213.   text-decoration: none;
  214.   color: #;
  215. }
  216. a:focus{
  217.     outline:;
  218. }
  219. html,body{font-size:$browser-default-font-size;height:%; }
  220. body {
  221.   margin:  auto;
  222.   min-width: 320px;
  223.   max-width: 640px;
  224.   background: #eaeef2;
  225.   // font-size: 14px;
  226.   font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;
  227.   line-height: 1.5;
  228.   color: #;
  229.   -webkit-text-size-adjust: % !important;
  230.   -webkit-user-select: none;
  231.   user-select: none;
  232. }
  233.  
  234. .g_cf:after{
  235.     display:block;
  236.     content:'\20';
  237.     clear:both;
  238.     height:;
  239.     visibility:hidden;
  240. }
  241. input{-webkit-appearance: none;}
  242. .g_cf{
  243.     *zoom:;
  244.     *overflow:hidden
  245. }
  246. .hide{display:none};
  247. .display{display:block};
  248. .g_h5{height:pxTo2rem(5px);}
  249. .g_h10{height:pxTo2rem(10px);}
  250. .g_h10{height:pxTo2rem(10px);}
  251. .g_h15{height:pxTo2rem(15px);}
  252. .g_h20{height:pxTo2rem(20px);}
  253. .g_h25{height:pxTo2rem(25px);}
  254. .g_h30{height:pxTo2rem(30px);}
  255. .g_h35{height:pxTo2rem(35px)}
  256. .g_h40{height:pxTo2rem(40px);}
  257. .g_h50{height:pxTo2rem(50px)}
  258. .g_h70{height:pxTo2rem(70px)}
  259. .g_h100{height:pxTo2rem(100px)}
  260. .g_h130{height:pxTo2rem(130px)}
  261.  
  262. .fs2_6{color:#;font-size: pxTo2rem(20px)}
  263. .fs25_6{color:#;font-size: pxTo2rem(25px)}
  264. .fs2_9{color:#;font-size: pxTo2rem(20px)}

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

  1. @charset "UTF-8";
  2. @import 'mod_border';
  3. /*引进图片合并给一个变量(后面会用到这个变量)*/
  4. $sprites:sprite-map("icon/*.png",$spacing:8px,$layout: vertical);
  5.  
  6. /*转换px到rem*/
  7. $browser-default-font-size : 16px !default;
  8. /***640下2倍px 转换为 1倍px**/
  9. @function pxTo($px){
  10.   @if $px == {$px:0px}
  11.   @return $px / ;
  12. }
  13. /***转换为em**/
  14. @function pxToem($px){
  15.   @if $px == {$px:0px}
  16.   @return $px / $browser-default-font-size * 1em;
  17. }
  18.  
  19. @function pxTo2em($px){
  20.   @if $px == {$px:0px}
  21.   @return $px / ($browser-default-font-size*) * 1em;
  22. }
  23. // 初始化变量
  24. $browser: null;
  25. // 设置关键帧
  26. @mixin keyframes($name) {
  27.     @-webkit-keyframes #{$name} {
  28.         $browser: '-webkit-'; @content;
  29.     }
  30.     @-moz-keyframes #{$name} {
  31.         $browser: '-moz-'; @content;
  32.     }
  33.     @-o-keyframes #{$name} {
  34.         $browser: '-o-'; @content;
  35.     }
  36.     @keyframes #{$name} {
  37.         $browser: ''; @content;
  38.     }
  39. }
  40.  
  41. /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
  42. $media:ture;
  43. @mixin iconItem($sprites,$name,$iE6:null){
  44.   background:sprite-url($sprites) no-repeat;  //获取整个雪碧图路径
  45.   @if $iE6 != null{ //null
  46.     _background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8
  47.   }
  48.   $width:image-width(sprite-file($sprites,$name));  //sprite-file 获取目标图片
  49.   $height:image-height(sprite-file($sprites,$name));  //获取目标图片
  50.   $toalWidth:image-width(sprite-path($sprites));    //获取整张图的宽度
  51.   $totalHeight:image-height(sprite-path($sprites));   //获取整张图的高度
  52.   $widthHalf:ceil($width/);               //获取宽度的一半
  53.   $heightHalf:ceil($height/);            //获取高度的一半
  54.   //sprite-position 获取目标图的位置,nth操作数组
  55.   $posX:round(nth(sprite-position($sprites,$name),));  //获取沿x轴的位移
  56.   $posY:round(nth(sprite-position($sprites, $name), ));  //获取沿y轴的位移
  57.   @if $media{//wap
  58.     height:$heightHalf;
  59.     width:$widthHalf;
  60.     background-position: $posX/ $posY/;
  61.     background-size:$toalWidth/ $totalHeight/;
  62.   } @else{//PC
  63.     height:$height;
  64.     width:$width;
  65.     background-position:sprite-position($sprites,$name);
  66.   }
  67. }
  68. /*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
  69. @mixin  timestampImg($imgUrl){
  70.   background:image-url($imgUrl) no-repeat;
  71.   $width:image-width($imgUrl);
  72.   $height:image-height($imgUrl);
  73.   @if $media{ //wap
  74.     width:$width/;
  75.     height:$height/;
  76.     background-size:$width/ $height/;
  77.   } @else{
  78.     height:$height;
  79.     width:$width;
  80.   }
  81. }
  82. /*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
  83. @mixin  base64Img($imgUrl){
  84.   background-image:inline-image($imgUrl);
  85.   background-repeat:no-repeat;
  86.   $width:image-width($imgUrl);
  87.   $height:image-height($imgUrl);
  88.   @if $media{ //wap
  89.     width:$width/;
  90.     height:$height/;
  91.     background-size:$width/ $height/;
  92.   } @else{
  93.     height:$height;
  94.     width:$width;
  95.   }
  96. }
  97. @mixin size($width, $height:false){
  98.   @if not $height {
  99.     $height : $width;
  100.   }
  101.   width: $width + px;
  102.   height: $height + px ; 
  103.  
  104. }
  105. //圆角
  106. @mixin boradius($size){
  107.   -webkit-border-radius:$size;
  108.   -moz-border-radius:$size;
  109.   -o-border-radius:$size;
  110.   -ms-border-radius:$size;
  111.   border-radius:$size;
  112. }
  113. @mixin border-radius($size){
  114.   -webkit-border-radius:$size;
  115.   -moz-border-radius:$size;
  116.   -o-border-radius:$size;
  117.   -ms-border-radius:$size;
  118.   border-radius:$size;
  119. }
  120. %boxSize{
  121.   -webkit-box-sizing: border-box;
  122.   box-sizing: border-box;
  123. }
  124. %inlineb{display:inline-block;}
  125. %block{display:block;}
  126.  
  127. //绝对居中
  128. @mixin  pscenter($width,$height){
  129.   width:$width;
  130.   height:$height;
  131.   position:absolute;
  132.   left:%;
  133.   top:%;
  134.   margin:(-$height/)   (-$width/)
  135. }
  136.  
  137. // 文字省略：单行
  138. %text_oneline {
  139.     white-space: nowrap;
  140.     overflow: hidden;
  141.     text-overflow: ellipsis;
  142. }
  143.  
  144. // 文字省略：两行
  145. %text_twoline {
  146.     overflow: hidden;
  147.     text-overflow: ellipsis;
  148.     display: -webkit-box;
  149.     -webkit-line-clamp: ;
  150.     -webkit-box-orient: vertical;
  151. }
  152.  
  153. // 文字省略：自定义多行
  154. @mixin elli($elli) {
  155.     overflow: hidden;
  156.     text-overflow: ellipsis;
  157.     display: -webkit-box;
  158.     -webkit-line-clamp: $elli;
  159.     -webkit-box-orient: vertical;
  160. }
  161.  
  162. // flex 布局
  163. %box{
  164.     display: box;
  165.     display: -ms-box;
  166.     display: -webkit-box;
  167.     display: flex;
  168.     display: -ms-flexbox;
  169.     display: -webkit-flex;
  170. }
  171. %boxflex {
  172.     display: box;
  173.     display: -ms-box;
  174.     display: -webkit-box;
  175.     display: flex;
  176.     display: -ms-flexbox;
  177.     display: -webkit-flex;
  178. }
  179. %flex {
  180.     display: block;
  181.     flex: ;
  182.     -ms-flex: ;
  183.     -webkit-flex: ;
  184.     box-flex: ;
  185.     -ms-box-flex: ;
  186.     -webkit-box-flex: ;
  187. }
  188.  
  189. // 清除表单样式
  190. %input_clear {
  191.     border: none;
  192.     background: none;
  193.     -webkit-appearance: none;
  194.     -webkit-border-radius: ;
  195. }
  196.  
  197. // 固定定位条
  198. %fixedBar {
  199.     position: fixed;
  200.     left: ;
  201.     right: ;
  202.     width: %;
  203. }
  204.  
  205. @mixin center($width, $height){
  206.   width: $width + px;
  207.   height: $height + px ;
  208.   position: absolute;
  209.   left: %;
  210.   top: %;
  211.   margin-left: $width / (-) + px;
  212.   margin-top: $height / (-) + px;
  213. }
  214.  
  215. /* ************************全局模块样式************************** */
  216. * {
  217.   -webkit-tap-highlight-color: transparent;
  218.   outline: ;
  219. }
  220.  
  221. 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 {
  222.   margin: ;
  223.   padding: ;
  224.   vertical-align: baseline;
  225. }
  226. body{background:#EAEAEA}
  227. img {
  228.   border:  none;
  229.   vertical-align: top;
  230. }
  231. a img{border: none}
  232. i, em {
  233.   font-style: normal;
  234. }
  235.  
  236. ol, ul {
  237.   list-style: none;
  238. }
  239.  
  240. input, select, button,textarea, h1, h2, h3, h4, h5, h6 {
  241.   font-size: %;
  242.   font-family: inherit;
  243. }
  244.  
  245. table {
  246.   border-collapse: collapse;
  247.   border-spacing: ;
  248. }
  249.  
  250. a, a:visited {
  251.   text-decoration: none;
  252.   color: #;
  253. }
  254. a:focus{
  255.   outline:;
  256. }
  257. html,body{font-size:$browser-default-font-size;height:%; }
  258. body {
  259.   margin:  auto;
  260.   min-width: 320px;
  261.   max-width: 640px;
  262.   background: #fff;
  263.   // font-size: 14px;
  264.   font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;
  265.   line-height: 1.5;
  266.   color: #;
  267.   -webkit-text-size-adjust: % !important;
  268.   -webkit-user-select: none;
  269.   user-select: none;
  270. }
  271.  
  272. .g_cf:after{
  273.     display:block;
  274.     content:'\20';
  275.     clear:both;
  276.     height:;
  277.     visibility:hidden;
  278. }
  279. input{-webkit-appearance: none;}
  280. .g_cf{
  281.     *zoom:;
  282.     *overflow:hidden
  283. }
  284. .hide{display:none};
  285. .display{display:block};pxTo2em
  286. .g_h5{height:pxTo2em(5px);}
  287. .g_h10{height:pxTo2em(10px);}
  288. .g_h10{height:pxTo2em(10px);}
  289. .g_h15{height:pxTo2em(15px);}
  290. .g_h20{height:pxTo2em(20px);}
  291. .g_h25{height:pxTo2em(25px);}
  292. .g_h30{height:pxTo2em(30px);}
  293. .g_h35{height:pxTo2em(35px)}
  294. .g_h40{height:pxTo2em(40px);}
  295. .g_h50{height:pxTo2em(50px)}
  296. .g_h70{height:pxTo2em(70px)}
  297. .g_h100{height:pxTo2em(100px)}
  298. .g_h130{height:pxTo2em(130px)}
  299.  
  300. .fs2_6{color:#;font-size: pxTo2rem(20px)}
  301. .fs25_6{color:#;font-size: pxTo2rem(25px)}
  302. .fs2_9{color:#;font-size: pxTo2rem(20px)}
  303.  
  304. .cl_666{color:# !important;}
  305. .red{color:red !important}
  306.  
  307. .bd_top_no{border-top:none !important}

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

  1. @charset "utf-8";
  2.  
  3. /*引进图片合并给一个变量(后面会用到这个变量)*/
  4. $sprites1:sprite-map("cloud/*.png",$spacing:10px,$layout: vertical);
  5.  
  6. /*转换px到rem*/
  7. $browser-default-font-size : 20px !default;
  8. @function pxTorem($px){
  9.     @if $px == {$px:0px}
  10.     @return $px / $browser-default-font-size * 1rem;
  11. }
  12. @function pxTo2rem($px){
  13.     @if $px == {$px:0px}
  14.     @return $px / ($browser-default-font-size*) * 1rem;
  15. }
  16.  
  17. /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
  18. $media:false;
  19. @mixin iconItem($sprites,$name,$iE6:null){
  20.     background:sprite-url($sprites) no-repeat;  //获取整个雪碧图路径
  21.     @if $iE6 != null{ //null
  22.         _background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8
  23.     }
  24.     $width:image-width(sprite-file($sprites,$name));  //sprite-file 获取目标图片
  25.     $height:image-height(sprite-file($sprites,$name));  //获取目标图片
  26.     $toalWidth:image-width(sprite-path($sprites));    //获取整张图的宽度
  27.     $totalHeight:image-height(sprite-path($sprites));   //获取整张图的高度
  28.     $widthHalf:ceil($width/);                             //获取宽度的一半
  29.     $heightHalf:ceil($height/);                        //获取高度的一半
  30.     //sprite-position 获取目标图的位置,nth操作数组
  31.     $posX:round(nth(sprite-position($sprites,$name),));  //获取沿x轴的位移
  32.     $posY:round(nth(sprite-position($sprites, $name), ));  //获取沿y轴的位移
  33.     @if $media{//wap
  34.         height:pxTorem($heightHalf);
  35.         width:pxTorem($widthHalf);
  36.         font:$posX;
  37.         font:$posY;
  38.         background-position: pxTo2rem($posX) pxTo2rem($posY);
  39.         background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight);
  40.     } @else{//PC
  41.         height:$height;
  42.         width:$width;
  43.         background-position:sprite-position($sprites,$name);
  44.     }
  45. }
  46. /*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
  47. @mixin  timestampImg($imgUrl){
  48.     background:image-url($imgUrl) no-repeat;
  49.     $width:image-width($imgUrl);
  50.     $height:image-height($imgUrl);
  51.     @if $media{ //wap
  52.         width:pxTo2rem($width);
  53.         height:pxTo2rem($height);
  54.         background-size:pxTo2rem($width) pxTo2rem($height);
  55.     } @else{
  56.         height:$height;
  57.         width:$width;
  58.     }
  59. }
  60. /*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
  61. @mixin  base64Img($imgUrl){
  62.     background:inline-image($imgUrl) no-repeat;
  63.     $width:image-width($imgUrl);
  64.     $height:image-height($imgUrl);
  65.     @if $media{ //wap
  66.         width:pxTo2rem($width);
  67.         height:pxTo2rem($height);
  68.         background-size:pxTo2rem($width) pxTo2rem($height);
  69.     } @else{
  70.         height:$height;
  71.         width:$width;
  72.     }
  73. }
  74.  
  75. @mixin boradius($size){
  76.     -webkit-border-radius:$size;
  77.     -moz-border-radius:$size;
  78.     -o-border-radius:$size;
  79.     -ms-border-radius:$size;
  80.     border-radius:$size;
  81. }
  82. %box{
  83.     -webkit-box-sizing: border-box;
  84.     box-sizing: border-box;
  85. }
  86. %inlineb{display:inline-block;}
  87. %block{display:block;}
  88. //绝对居中
  89. @mixin  pscenter($width,$height){
  90.     width:$width;
  91.     height:$height;
  92.     position:absolute;
  93.     left:%;
  94.     top:%;
  95.     margin:(-$height/)   (-$width/)
  96. }
  97.  
  98. /*******************基础样式*******************/
  99. /*\5FAE\8F6F\96C5\9ED1 微软雅黑  '\5b8b\4f53'宋体*/
  100. 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 {
  101.     padding: ;
  102.     margin:
  103. }
  104. html,body{font:12px/1.5 '\5FAE\8F6F\96C5\9ED1','\5b8b\4f53',sans-serif,arial;}
  105. img {
  106.     border: none;
  107. }
  108. ul, ol {
  109.     list-style: none
  110. }
  111. input, textarea, select, button {
  112.     resize: none;
  113.     font-family: inherit;
  114.     font-size: inherit;
  115.     font-weight: inherit;
  116.     outline: none;
  117.     font:12px/1.5 '\5FAE\8F6F\96C5\9ED1','\5b8b\4f53',sans-serif,arial;
  118. }
  119. button, input[type="button"], input[type=submit], input[type=reset] {
  120.     cursor:pointer;
  121.     border: none;
  122. }
  123. input[type="text"]{
  124.     color:#ccc
  125. }
  126. select{color:#}
  127. input[type="search"] {
  128.     -webkit-appearance:textfield
  129. }
  130. /* ie6 ie7去除text产生的蓝色边框 */
  131.  input[type=submit], input[type=reset] {
  132.     filter:chroma(color=#);
  133. }
  134. //关闭ie10里面的叉
  135. input:-ms-clear{display:none;}
  136. a img {
  137.     bord: none;
  138. }
  139. a{
  140.     outline:none;
  141.     text-decoration:none;
  142.     -webkit-tap-highlight-color:rgba(,,,);
  143.     blr:expression(this.onFocus=this.blur());
  144. }
  145. a:focus{
  146.     outline:;
  147. }
  148. .g_cf:after{
  149.     display:block;
  150.     content:'\20';
  151.     clear:both;
  152.     height:;
  153.     visibility:hidden;
  154. }
  155.  
  156. .g_cf{
  157.     *zoom:;
  158.     overflow:hidden
  159. }
  160. .g_h5{height:5px}
  161. .g_h10{height:10px}
  162. .g_h15{height:15px}
  163. .g_h20{height:20px}
  164. .g_h30{height:30px}
  165. .g_h40{height:40px}
  166. .g_h100{height:100px}

常用的sass编译库的更多相关文章

  1. sass编译

    sass编译 命令行编译 单文件转换命令 sass style.scss style.css 单文件监听命令 sass --watch style.scss:style.css 文件夹监听命令 sas ...

  2. 怎么使用Less/Sass编译工具koala

    怎么使用Less/Sass编译工具koala 如何使用Less/Sass编译工具koala 一.SASS调试插件的方法 如需调试功能,请在编译输出的时候输出debug信息,那样解析的css文件中就会包 ...

  3. sass安装：webpack sass编译失败，node-sass安装失败的终极解决方

    文章来源:sass安装:webpack sass编译失败,node-sass安装失败的终极解决方 sass难言之隐-sass安装的坑 之前花了很多时间折腾node-sass,发现sass老是安装不上 ...

  4. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  5. Sass学习之路(3)——Sass编译

    Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤,因为".sass"和".scss"文件并不能直接使用<link>标签引用,最终其实还 ...

  6. ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法

    sass文件编译时候使用ruby环境,无论是界面化的koala工具还是命令行模式的都无法通过,真是令人烦恼. 容易出现中文注释时候无法编译通过,或者出现乱码,找了几天的解决方法终于解决了. 这个问题的 ...

  7. Sass 编译的几种方法

    常常有人会问,使用 Sass 进行开发,那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢? 那么这里告诉大家,在项目中还是引用“.css”文件,Sass 只不过是 ...

  8. sass 工具库

    github : https://github.com/uustoboy/base_mixins ( 有坑慎用 ) 项目截图: _base_mixins.scss 混合宏的引入文件; _setting ...

  9. .Net 常用插件及第三方库

    .Net 常用插件及第三方库 一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框 地址: ...

随机推荐

  1. css鼠标移动到文字上怎样变化背景颜色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 使用特殊构造的5GB文件测试Win2012Dedup功能

    WinServer2012一个崭新的功能就是支持重复数据删除功能.为了测试这个功能的情况,特别构造了一个特殊的5GB文件用于此次测试.惯例,先说下测试环境的搭建1 使用ESXi5上的版本8的VM,安装 ...

  3. 图片后门捆绑利用工具 – FakeImageExploiter

    在这里,要向大家推荐一款名为“Fake Image Exploiter”的安全工具,该工具可以在图片文件中捆绑隐藏的恶意.bat或.exe程序,方便钓鱼或社工攻击测试过程中的入侵控制.如果受害者点击该 ...

  4. iOS 图片切片的简单实现

    图片切片就是将一张图片按一定比例切分,中间部分系统自动填充空白, 这样在文本多行输入的时候,将具有特定形状的图片作为背景, 即使文本行数很多,也不会使图片走形. //即使你按5/5分,还是3/7分系统 ...

  5. 数据结构 http://www.cnblogs.com/sun-haiyu/p/7704654.html

    数据结构与算法--从平衡二叉树(AVL)到红黑树 上节学习了二叉查找树.算法的性能取决于树的形状,而树的形状取决于插入键的顺序.在最好的情况下,n个结点的树是完全平衡的,如下图“最好情况”所示,此时树 ...

  6. make的自动变量和预定义变量

    make的自动变量 $@ 规则目标的文件名.如果目标是档案文件的一个成员,"$@"就是档案文件的名称 $% 当目标是档案文件的一个成员时,"$%"是该成员的名称 ...

  7. Unity3d实现幸运转盘

    完成效果 我说一下制作流程,然后再看后面的代码1.创建一个image,选择我们的转盘背景图,素材找我或者网上都有,不多说了哈:2.创建一个空物体,位于转盘的正中心,因为我们的转盘指针的旋转中心是根据空 ...

  8. sql替换数据库字段中的字符

    UPDATE `table_name` SET `field_name` = replace (`field_name`,'from_str','to_str') WHERE ……说明:table_n ...

  9. Ubuntu16.04下Mongodb（离线安装方式|非apt-get）安装部署步骤（图文详解）（博主推荐）

    不多说,直接上干货! 说在前面的话  首先,查看下你的操作系统的版本. root@zhouls-virtual-machine:~# cat /etc/issue Ubuntu LTS \n \l r ...

  10. /etc/hosts

    /etc/hosts 是 Linux 系统中一个负责IP地址与域名快速解析的文件,解析优先级:DNS缓存 > hosts > DNS服务(/etc/resolv.conf) 文件格式:网络 ...