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;
    }
}