cssReset.scss

@charset "UTF-8";
/* CSS reset */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,dl,dt,dd,ul,ol,li,nav,footer,header,
form,input,optgroup,select,textarea,video,audio,iframe,button,pre,code,blockquote,q,
fieldset,legend,caption,object,article,aside,details,figcaption,figure,menu,section {margin:0;padding:0;border:0;font-size:100%;}
body,button,input,optgroup,select,textarea {font:14px/1.4286 "microsoft yahei",simsun,tahoma,arial,sans-serif;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}
a,ins {text-decoration:none;}
a {background-color:transparent;}
a:active,a:hover {outline-width:0;}
audio,canvas,video,progress {display:inline-block;}
article,aside,details,figcaption,figure,footer,header,menu,nav,section,iframe,main {display:block;}
summary {display:list-item;}
template,[hidden] {display:none;}
svg:not(:root) {overflow:hidden;}
abbr,acronym {border:0;font-variant:normal;}
del {text-decoration:line-through;}
caption,th {text-align:left;}
mark {background-color:#ff0;color:#000;}
small {font-size:80%;}
sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
img {vertical-align:middle;border-style:none;}
ol,ul {list-style:none;}
table {border-collapse:collapse;border-spacing:0;}
table,tbody,tfoot,thead,tr,th,td {padding:0;}
address,caption,cite,code,dfn,th,var,em,i,time {font-style:normal;font-weight:500;}
b,strong {font-weight:inherit;font-weight:bolder;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:"";content:none;}
hr {display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
button,input,select,textarea,:focus {outline:none;}
textarea {overflow:auto;}
button,input {overflow:visible;}
button,select {text-transform:none;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style:none;padding:0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline:1px dotted ButtonText;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height:auto;}
[type="search"] {-webkit-appearance:textfield;outline-offset:-2px;}
[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
[draggable] {cursor:move;}
body {/* word-wrap:break-word; */}

/* -WAP端 */
a {-webkit-text-decoration-skip:objects;}
audio:not([controls]) {display:none;height:0;}
button,html [type="button"],[type="reset"],[type="submit"] {-webkit-appearance:button;}
::-webkit-file-upload-button {-webkit-appearance:button;font:inherit;}
dfn {font-style:italic;}
html {-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-overflow-scrolling:touch;}
img,video,audio {max-width:100%;max-height:100%;}

a,button,input,textarea {-webkit-tap-highlight-color:rgba(63,40,1,.3);}
html {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*,*:before,*:after {-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit;}

/* -webkit-touch-callout:none; iOS按住一个目标元素时，不触发系统菜单（如：图片下载、链接复制） */
/* -webkit-user-select:none; 文本不被选中 */
/* /-WAP端 */
/* /CSS reset */

/* -富文本需重载上面的CSS reset */
.富文本类 em {
  font-style: italic;
}
.富文本类 ol {
  list-style-type: decimal;
  list-style-position: inside;
}
.富文本类 ul {
  list-style-type: disc;
  list-style-position: inside;
}
.富文本类 table {
  table-layout: fixed;
  text-align: center;
}
/* /-富文本需重载上面的CSS reset */


/* SCSS的@mixin、@function */
@mixin clearfix {

  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
@mixin bfc {

  &:before,
  &:after {
    content: "";
    display: table;
  }
}
@mixin ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@mixin multi-ellipsis($line-height, $line) {
  line-height: $line-height;
  height: $line-height * $line; // 或max-height: $line-height * $line; 非必须（用rem会因为小数点问题出现样式问题）
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}
@mixin img-bg {
  background: url(背景图大) 颜色 center center no-repeat;
  background-image: url(背景图小)\9;
  background-size: contain;
}
/* -x+y轴排列且等大雪碧图（参数：单图宽、高、x轴图片数量、y轴图片数量、图片间距）*/
@mixin sprites-xy($width, $height, $x, $y, $gap: 2) {
  width: #{$width}px;
  height: #{$height}px;
  background-image: url(图片前缀_#{$width}x#{$height}.png);
  background-repeat: no-repeat;

  // $i：横轴；$j：纵轴
  @for $j from 1 through $y {
    @for $i from 1 through $x {
      &.i-#{$j}-#{$i} {
        background-position: #{-($width + $gap)*($i - 1)}px #{-($height + $gap)*($j - 1)}px;
      }
    }
  }
}
/* /-x+y轴排列且等大雪碧图 */
/* -不同分辨率图片 */
@mixin image($url) {
  background-image: url($url + "@1.png");

  @media (min-resolution: 2dppx) {
    background-image: url($url + "@2.png");
  }

  @media (min-resolution: 3dppx) {
    background-image: url($url + "@3.png");
  }
}
/* /-不同分辨率图片 */
/* -rem */
@function rem($px, $base-font-size: 20px) {
  @if unitless($px) {
    @return rem($px + 0px);
  }
  @if unit($px) != "px" {
    @error "rem()的参数单位必须是px或不带单位";
  }

  // $base-font-size：切图时设计稿宽度对应的媒体查询中html的font-size 或 --rfz+px
  @return $px / $base-font-size + rem;
}
@mixin multi-ellipsis-rem($line-height, $line) {
  line-height: rem($line-height);
  height: rem($line-height * $line); // 或max-height: rem($line-height * $line); 非必须（用rem会因为小数点问题出现样式问题）
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}
@function position-one($positon, $singleSize, $spritesSize) {
  @if $positon == 0 {
    @return 0;
  } @else {
    @return percentage($positon / ($spritesSize - $singleSize));
  }
}
/* --x轴排列雪碧图 */
@mixin sprites-x($x: 0, $width: 单图固定宽度或0, $fullWidth: 合并图宽度) {
  background-image: url(图片);
  background-position: position-one($x, $width, $fullWidth) 0;
  background-size: rem($fullWidth) auto;
  background-repeat: no-repeat;
}
/* /--x轴排列雪碧图 */
/* --y轴排列雪碧图 */
@mixin sprites-y($y: 0, $height: 单图固定高度或0, $fullHeight: 合并图高度) {
  background-image: url(图片);
  background-position: 0 position-one($y, $height, $fullHeight);
  background-size: auto rem($fullHeight);
  background-repeat: no-repeat;
}
/* /--y轴排列雪碧图 */
/* --x+y轴排列且等大雪碧图（参数：单图宽、高、x轴图片数量、y轴图片数量、图片间距） */
@mixin sprites-xy($width, $height, $x, $y, $gap: 2) {
  width: rem($width);
  height: rem($height);
  background-image: url(图片前缀_#{$width}x#{$height}.png);
  background-size: rem(($width + $gap)*$x - $gap) rem(($height + $gap)*$y - $gap);
  background-repeat: no-repeat;

  // $i：横轴；$j：纵轴
  @for $j from 1 through $y {
    @for $i from 1 through $x {
      &.i-#{$j}-#{$i} {
        background-position: position-one(($width + $gap)*($i - 1), $width, ($width + $gap)*$x - $gap) position-one(($height + $gap)*($j - 1), $height, ($height + $gap)*$y - $gap);
      }
    }
  }
}
/* /--x+y轴排列且等大雪碧图 */
/* /-rem */
/* /SCSS的@mixin、@function */

/* 全局 */
html, body {
  /* height: 100%; */
}
body {
  background-color: #fff;
  color: #333;
  min-width: 最小宽度;
  position: relative;
  @include bfc;
}
a {
  color: #333;
}
a:hover {
  text-decoration: none;
}
/* /全局 */

/* 布局 */
.m-full-bg {
  background: center top no-repeat;
  min-width: 最小宽度;
  overflow: hidden;

  .full-wrap {
    width: 最小宽度;
    margin: 0 auto;
    position: relative;

    &:before,
    &:after {
      content: "";
      display: table;
    }
  }
}
/* /布局 */