• Sass 默认样式库


       Sass 默认初始化样式库

    @charset "utf-8";
    
    // 变量存储
    // 字体Unicode编码 微软雅黑:5FAE8F6F96C59ED1 , 宋体:5B8B4F53
    $pcFont: '5FAE8F6F96C59ED1', '5B8B4F53', 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;
        }
    }
    始终相信努力奋斗的意义,因为那是本质问题。
  • 相关阅读:
    视频分解图片,图片合成视频
    获取图片中指定区域图片
    CALayer alpha mask not working
    多媒体编程ios摄像头图像抓取工具类
    10月17日
    10月16日
    10月15日
    10月14日
    10月13日
    10月12日
  • 原文地址:https://www.cnblogs.com/morong/p/4476244.html
Copyright © 2020-2023  润新知