zoukankan      html  css  js  c++  java
  • sass

    // 设置宽高
    @mixin wh($wid,$hei){
        @if $wid {
             $wid;
        }
        @if $hei {
            height: $hei;
        }
        overflow: hidden;
    }
    // 设置高度与行高一致
    @mixin lineH($index){
        height: $index;
        line-height: $index;
    }
    // 父元素相对,子元素绝对
    @mixin absolut($index){
        position: relative;
        &:after{
            content: "";
            position: absolute;
            z-index: $index;
        }
    }
    // 文本样式
    @mixin txts($fs,$cl){
        @if $fs {
            font-size: $fs;
        }
        @if $cl {
            color: $cl;
        }
    }
    // 透明度设置
    @mixin op($index){
        opacity: $index;
        filter: alpha(opacity = ($index * 100));
    }
    // 背景图
    @mixin bgImg($link){
        background: url("../img/"+$link) no-repeat;
    }
    // icon图标
    @mixin iCon($w,$h,$bg,$index){
        @include wh($w,$h)
        @include bgImg($bg)
        margin-right: $index;
    }
    // 变形
    @mixin transForm($index){
        -webkit-transform: $index;
        -moz-transform: $index;
        -ms-transform: $index;
        transform: $index;
    }
    // 制作小箭头
    @mixin arrow($clr,$index){
            border-right: 1px solid $clr;
            border-bottom: 1px solid $clr;
            @include transForm(rotate($index))
    }
    // 圆角度
    @mixin radiu($index){
     -webkit-border-radius: $index;
     -moz-border-radius: $index;
     border-radius: $index;
    }
    // 盒阴影
    @mixin boxSd($shadow...){
        -webkit-box-shadow: $shadow;
        -moz-box-shadow: $shadow;
        -ms-box-shadow: $shadow;
        box-shadow: $shadow;
    }
    // 常用内联块元素设置
    %inlineB{
        display: inline-block;
        _display: inline;
    }
  • 相关阅读:
    二分查找法
    AES算法工具类
    SHA加密算法工具类
    使用SQL创建唯一索引
    springboot 启动类CommandLineRunner(转载)
    MD5加密算法工具类
    Android 通过Socket 和服务器通讯
    android 网络连接判断
    android 文件上传,中文utf-8编码
    github打不开问题
  • 原文地址:https://www.cnblogs.com/padding1015/p/8663540.html
Copyright © 2011-2022 走看看