h5开发通用sass基础配置文件

拼搏现实的明天。 2022-06-08 11:08 129阅读 0赞

h5开发通用sass基础配置文件：

a, abbr, acronym, address, applet, article, aside, audio,
    b, blockquote, big, body,
    center, canvas, caption, cite, code, command,
    datalist, dd, del, details, dfn, dl, div, dt,
    em, embed,
    fieldset, figcaption, figure, font, footer, form,
    h1, h2, h3, h4, h5, h6, header, hgroup, html,
    i, iframe, img, ins,
    kbd,
    keygen,
    label, legend, li,
    meter,
    nav,
    object, ol, output,
    p, pre, progress,
    q,
    s, samp, section, small, span, source, strike, strong, sub, sup,
    table, tbody, tfoot, thead, th, tr, tt,
    u, ul,
    var { background: transparent; border: 0 none; margin: 0;padding: 0; border: 0;outline:0;vertical-align: top; -webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing: antialiased;}
    blockquote, q { quotes: none;}
    table, table td { padding: 0; border: none; border-collapse: collapse;}
    img {
       border: 0;}
    select {
       white-space: nowrap} caption {text-align: left;}
    embed {
       vertical-align: top;}
    div, ul, li, ol, dl, dd, p { word-wrap: break-word;}
    ul, li, ol, dl, dd{ list-style-type: none;}
    input, textarea, select { font-family: inherit; outline: none; font-size: inherit; font-weight: inherit; padding: 0; margin: 0;}
    h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight:normal;}
    body { text-align: left;color: #828282;overflow-x: hidden;}
    html,body{ font:10px/1.5 Microsoft YaHei,\5b8b\4f53, Arial, Verdana; width: 100%;}
    a{
       text-decoration: none;white-space:nowrap; color: #828282;}
    input,input[type="button"], input[type="submit"], input[type="reset"],input[type="number"] {-webkit-appearance: none; }
    input::-webkit-inner-spin-button { -webkit-appearance: none;}
    input::-webkit-outer-spin-button { -webkit-appearance: none;}
    form{
       margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent} /* ---------- Responsive accurate ---------- */ @media (min-width:640px){html{font-size:24px;}}
    @media (min-width:631px) and (max-width:639px){ html{
       font-size:23.66px;}}
    @media (min-width:622px) and (max-width:630px){ html{
       font-size:23.33px;}}
    @media (min-width:613px) and (max-width:621px){ html{
       font-size:23px;}}
    @media (min-width:604px) and (max-width:612px){ html{
       font-size:22.66px;}}
    @media (min-width:595px) and (max-width:603px){ html{
       font-size:22.33px;}}
    @media (min-width:586px) and (max-width:594px){ html{
       font-size:22px;}}
    @media (min-width:577px) and (max-width:585px){ html{
       font-size:21.66px;}}
    @media (min-width:568px) and (max-width:576px){ html{
       font-size:21.33px;}}
    @media (min-width:559px) and (max-width:567px){ html{
       font-size:21px;}}
    @media (min-width:550px) and (max-width:558px){ html{
       font-size:20.66px;}}
    @media (min-width:541px) and (max-width:549px){ html{
       font-size:20.33px;}}
    @media (min-width:533px) and (max-width:540px){ html{
       font-size:20px;}}
    @media (min-width:524px) and (max-width:532px){ html{
       font-size:19.66px;}}
    @media (min-width:515px) and (max-width:523px){ html{
       font-size:19.33px;}}
    @media (min-width:506px) and (max-width:514px){ html{
       font-size:19px;}}
    @media (min-width:497px) and (max-width:505px){ html{
       font-size:18.66px;}}
    @media (min-width:488px) and (max-width:496px){ html{
       font-size:18.33px;}}
    @media (min-width:480px) and (max-width:487px){ html{
       font-size:18px;}}
    @media (min-width:471px) and (max-width:479px){ html{
       font-size:17.66px;}}
    @media (min-width:462px) and (max-width:470px){ html{
       font-size:17.33px;}}
    @media (min-width:453px) and (max-width:461px){ html{
       font-size:17px;}}
    @media (min-width:444px) and (max-width:452px){ html{
       font-size:17.12px;}}
    @media (min-width:435px) and (max-width:443px){ html{
       font-size:16.33px;}}
    @media (min-width:426px) and (max-width:434px){ html{
       font-size:16px;}}
    @media (min-width:417px) and (max-width:425px){ html{
       font-size:15.66px;}}
    @media (min-width:408px) and (max-width:416px){ html{
       font-size:15.33px;}}
    @media (min-width:400px) and (max-width:407px){ html{
       font-size:15px;}}
    @media (min-width:391px) and (max-width:399px){ html{
       font-size:14.66px;}}
    @media (min-width:382px) and (max-width:390px){ html{
       font-size:14.33px;}}
    @media (min-width:374px) and (max-width:381px){ html{
       font-size:14px;}}
    @media (min-width:365px) and (max-width:373px){ html{
       font-size:13.66px;}}
    @media (min-width:356px) and (max-width:364px){ html{
       font-size:13.33px;}}
    @media (min-width:347px) and (max-width:355px){ html{
       font-size:13px;}}
    @media (min-width:338px) and (max-width:346px){ html{
       font-size:12.66px;}}
    @media (min-width:329px) and (max-width:337px){ html{
       font-size:12.44px;}}
    @media (max-width:328px){ html{
       font-size:12px;}}
    
    /* * SASS setting */
    //-----------------------------------------------------
    $prefixForWebkit: true !default;
    $prefixForMozilla: true !default;
    $prefixForMicrosoft: true !default;
    $prefixForOpera: false !default; //opera
    $prefixNo: true !default;
    
    // 
    $flexOld: true !default; //09
    $flexMid: true !default; //
    $URL: "../images/";//url
    //
    $REM: 24;//rem unit
    @function REM($n){ 
        @return $n/$REM*1rem;
    }
    // prefixer
    @mixin prefixer($property, $value, $prefixes: webkit moz) { 
      @each $prefix in $prefixes { 
        @if $prefix == webkit and $prefixForWebkit == true { 
          -webkit-#{$property}:#{$value};
        }
        @else if $prefix == moz and $prefixForMozilla == true { 
          -moz-#{$property}:#{$value};
        }
        @else if $prefix == o and $prefixForMozilla == true { 
          -o-#{$property}:#{$value};
        }
        @else if $prefix == ms and $prefixForMicrosoft == true { 
          -ms-#{$property}:#{$value};
        }
      }
      @if $prefixNo { 
        #{$property}: $value;
      }
    }
    //opacity
    @mixin opacity($alpha) { 
        @include prefixer(opacity,$alpha);
        filter:alpha(opacity=$alpha * 100);
    }
    //pos-center
    @mixin pos-center($width,$height){ 
        margin-left: -($width/2);
        margin-top: -($height/2);
        width: $width;
        height: $height;
    }
    //bg100
    @mixin bg-full($width,$height,$name){ 
        width: $width;
        height: $height;
        background: url(#{$URL}#{$name}) 0 0 no-repeat;
        @include prefixer(background-size,100% 100%);
    }
    //隐藏滚动条
    @mixin hideScroller { 
        &::-webkit-scrollbar { width: 0;
            height: 0;
            border: 0;
            background-color: rgba(0,0,0,0);
        }
    }
    //苹果手机滑动优化
    @mixin scrollSmooth { 
        -webkit-overflow-scrolling: touch;
    }
    @mixin forwards{ 
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
    }
    @mixin flex-h { 
        display: flex;
        justify-content: center;
    }
    .hide {
        display: none !important;
    }
    .fixed {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1000;
        background-color: rgba(0,0,0,0.8);
    }
    .fixed2 {
        position: absolute;
        width: 100%;
        height: calc(100% - 3.5rem);
        left: 0;
        top: REM(87);
        z-index: 1000;
        background-color: rgba(0,0,0,0.8);
    }
    .clearfix:after {
        content: ".";
        display: block;
        width: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        clear: both;
        overflow: hidden;
    }

如果设计稿是宽是640的话，就可以直接用这一套。  
有需要的老铁可以挑一些用。