常用 SCSS 不完全總結

__ihhu發表於2017-08-08
CSS

  • Reset.scss

//pc
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td,section,a,input,span{margin:0;padding:0; } 
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
html,body{-webkit-user-select: none;user-select: none;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}
body,input,textarea{font-family: "Microsoft YaHei", "Simsun",Arial;-webkit-font-smoothing: antialiased;}
table {border-collapse:collapse;border-spacing:0;} 
fieldset,img {border:0} 
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} 
ol,ul {list-style:none} 
caption,th,td{text-align:center} 
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} 
q:before,q:after {content:''} 
input[type=button],button{-webkit-appearance:none;-webkit-user-select:none;}
a,input,img,select,textarea{outline: none;}
input::-webkit-search-cancel-button {display: none;}
input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder{opacity: 0;}
img{-webkit-touch-callou:none;}
.show{display:block !important;}
.hide,.none{display:none !important;}
/* clear */
.clearfix:before, .clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
*.clearfix {zoom:1;}

//------------------------------------------------------------------------------------------
//mobile

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td,section,a,input,span{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box; } 
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
html,body{-webkit-user-select: none;user-select: none;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}
body,input,textarea{font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif,"microsoft yahei";-webkit-font-smoothing: antialiased;}
table {border-collapse:collapse;border-spacing:0;} 
fieldset,img {border:0} 
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} 
ol,ul {list-style:none} 
caption,th,td{text-align:center} 
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} 
q:before,q:after {content:''} 
input[type=button],button{-webkit-appearance:none;-webkit-user-select:none;}
a,img,input,select,li{-webkit-tap-highlight-color: rgba(0,0,0,0);}
a,img{text-decoration:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout:none;}
a,input,img,select,textarea{outline: none;}
input::-webkit-clear-button,input::-webkit-inner-spin-button,input::-webkit-outer-spin-button {-webkit-appearance: none; }
input::-webkit-search-cancel-button {display: none;}
input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder{opacity: 0;}
::-webkit-scrollbar{display:none;width: 0;}
img{-webkit-touch-callou:none;}
*{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.show{display:block !important;}
.hide,.none{display:none !important;}
/* clear */
.clearfix:before, .clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
*.clearfix {zoom:1;}複製程式碼

  • Mixin.scss

//是否移動端
$isMobile:false;

//字首
@mixin css3($property, $value...) { 
    @if $isMobile{
        @each $prefix in -webkit-,'' { 
            #{$prefix}#{$property}: $value;
        }
    }
    @else{
        @each $prefix in -webkit-,-moz-,-ms-,-o-,'' { 
            #{$prefix}#{$property}: $value;
        }
    }

}

//伸縮盒（舊）
@mixin box($pack:start,$align:start,$orient:horizontal){
    display: -webkit-box;
    display: box;
    -webkit-box-pack: $pack;
    box-pack: $pack; 
    -webkit-box-align: $align;
    box-align: $align;
    -webkit-box-orient: $orient;
    box-orient: $orient;
}
//box居中
@mixin pack-c{@include box($pack:center);}
@mixin align-c{@include box($align:center);}
@mixin box-c{@include box($pack:center,$align:center)}
//box縱向佈局
@mixin box-v{@include box($orient:vertical)}

//文字溢位省略號顯示
@mixin ellipsis($line:1){
    @if $line==1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    @else {
        display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

// 過渡
@mixin transition($transition...) {
    @include css3(transition,$transition)
}

// 旋轉位置
@mixin transform-origin($origin...) {
    @include css3(transform-origin,$origin)
}

//轉換
@mixin transform($transform...) {
    @include css3(transform,$transform)
}

// 動畫名稱
@mixin animation($aniName...) {
    @include css3(animation,$aniName)
}

// 延遲執行時間
@mixin animation-delay($time) {
    @include css3(animation-delay,$time)
}

// 延遲執行時間
@mixin transition-delay($time) {
    @include css3(transition-delay,$time)
}

//動畫定義
@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {  
        @content;  
    }  
    @-moz-keyframes #{$animationName} {  
        @content;  
    }  
    @-o-keyframes #{$animationName} {  
        @content;  
    }  
    @keyframes #{$animationName} {  
        @content;  
    }  
}

// 禁用樣式，加!important 
@mixin disabled($bgColor:#e6e6e6,$textColor:#ababab){
    background-color: $bgColor !important;
    color: $textColor !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

//統一按鈕樣式
@mixin btn-css($w:110,$h:36,$color:#fff,$bg:#00A2FF){
    display: block;width:$w+px;height:$h+px;background:$bg;color:$color;line-height: 0;text-align: center;
    &:hover{background:lighten($bg,5%);}
    &:active{background:darken($bg,5%);}
    &.dis{@include disabled(#d9d9d9,#fff);border:none;}
}

//統一圖片樣式
@mixin imgbox($w:0,$h:0){
    width:$w;height:$h;overflow:hidden;
    img{display: block;width:100%;}
}複製程式碼

  • Mobile Media.scss

//page width
$designWidth: 640;
//px to rem
@function rem($px: 10) {
    @return $px/$designWidth*10rem;
}

html{font-size:$designWidth/10*1px;width:100%;}
body{font-size:rem(28);margin:0 auto;width:100%;min-width:320px;}

/*media*/
@for $i from 32 through $designWidth/10 {
    $index: 10;
    $j: $i*$index;
    @if $i==32{
        @media screen and (max-width:#{$j}px){
           html{font-size:($j/10) + px !important;}
        } 
    }
    @media screen and (min-width: #{$j}px) {
        html {
            @if $j>=$designWidth {
                font-size: ($j/10) + px !important;
            }@else {
                font-size: ($j/10) + px
            }

        }
    }
}
html {font-size: $designWidth/10/$designWidth*100vw;}

//------------------------------------------------------------------------------------
//高清屏 1px邊框問題 處理
//@include retina-border($position:relative){
//    border:1px solid #ddd;
//    border-radius:rem(3);
//    ...
//}
@mixin retina-border($position:relative,$class:before){
    @media (-webkit-min-device-pixel-ratio: 2) { 
        &{border:none;position: $position}
        &:#{$class}{
            content:"";
            position: absolute;
            left:0;
            top:0;
            width: 200%;
            height: 200%;
            pointer-events: none;
            z-index: -1;
            @include transform-origin(left top);
            @include transform(scale(.5));
            @content;
        }
    }
}複製程式碼

相關文章