Sass 默认样式库
Sass 默认初始化样式库
@charset "utf-8"; // 变量存储 // 字体Unicode编码 微软雅黑:\5FAE\8F6F\96C5\9ED1 , 宋体:\5B8B\4F53 $pcFont: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', arial; $defaultColor: #333; $mobileFont: 'Helvetica Neue', Helvetica, STHeiTi, Microsoft YaHei, sans-serif, Microsoft JhengHei, Arial; $browser: null; %display { display:inline-block; *display:inline; *zoom:1; } %text-indent { font-size:0; text-indent:-99999em; overflow:hidden; } %box-sizing { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; } // 绝对居中 @mixin center($width, $height) { position: absolute; left:50%; top:50%; width:$width; height:$height; margin:(-$height / 2) 0 0 (-$width / 2); } // 设置动画名称 @mixin animation($aniName) { -webkit-animation:$aniName; -moz-animation:$aniName; -o-animation:$aniName; animation:$aniName; } // 设置延迟执行时间 @mixin animation-delay($time) { -webkit-animation-delay:$time; -moz-animation-delay:$time; -o-animation-delay:$time; animation-delay:$time; } // 设置阴影 @mixin box-shadow($shadow...) { -webkit-box-shadow:$shadow; -moz-box-shadow:$shadow; -o-box-shadow:$shadow; box-shadow:$shadow; } // 圆角 @mixin border-radius($radius) { -webkit-border-radius:$radius; -moz-border-radius:$radius; -o-border-radius:$radius; border-radius:$radius; } // 设置过渡 @mixin transition($transition...) { -webkit-transition:$transition; -moz-transition:$transition; -o-transition:$transition; transition:$transition; } // 设置旋转位置 @mixin transform-origin($origin...) { -webkit-transform-origin:$origin; -moz-transform-origin:$origin; -o-transform-origin:$origin; transform-origin:$origin; } @mixin transform($transform...) { -webkit-transform:$transform; -moz-transform:$transform; -o-transform:$transform; transform:$transform; } // 设置关键帧 @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; } } /* ********************重置样式 reset******************** */ /* *********PC端********** */ body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, figure, figcaption { margin:0px; } ul, ol { list-style:none; margin:0px; padding:0px; } body { font:14px/1.5 $pcFont; width:100%; color: $defaultColor; overflow-x:hidden; } h1,h2,h3,h4,h5,h6 { font-weight:normal; } /* 清除点击出现虚拟框 */ a{ outline:none; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); &:focus{ outline:0; } &:link, &:visited { color: $defaultColor; text-decoration:none; } } a img { border:none; } input, textarea, select { outline:none; font:12px/1.5 $pcFont; } /* 清除浮动 */ .clearfix { *zoom:1; &:after { display:block; content:"\200B"; clear:both; height:0; } } /* *********移动端********** */ body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, figure, figcaption { margin:0px; } /* 改变盒子模型 */ section, article, nav, aside, footer, header, div, p, ul, li, input, textarea { display: block; @extend %box-sizing; } html, body { -webkit-user-select: none; /* 禁止选中文本 */ user-select: none; -webkit-text-size-adjust: 100%; /* iphone禁用文字大小调整 */ -ms-text-size-adjust: 100%; } html { font-size:625%; } body{ font:.16rem/1.6 $mobileFont; color:#333; -webkit-overflow-scrolling: touch; } h1, h2, h3, h4, h5, h6{ font-weight:normal; } /* 清除点击虚拟框 */ a, div, p, span, ul, li, i, img, input { outline:0; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); } a:focus{ outline:0; } a:link,a:visited{ color:$defaultColor; text-decoration:none; } a img{ border:0 none; } a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ } input, textarea, select { outline: none; color: $defaultColor; font-family: $mobileFont; } input { /* 清除 iphone 中 input 默认样式 */ -webkit-appearance: none; } /* 清除浮动 */ .clearfix { *zoom:1; &:after { display:block; content:"\200B"; clear:both; height:0; } }