sass封装h5适配文件

简介: sass封装h5适配文件
@charset "UTF-8";
/**
使用方法
@include keyframes(anMeinv,(
    0%:(
        background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
        background-size: pxToRem(165) pxToRem(157)
    ),
    50%:(
        background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
        background-size: pxToRem(265) pxToRem(257)
    ),
    75%:(
        background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
        background-size: pxToRem(565) pxToRem(657)
    ),
    100%:(
        background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
        background-size: pxToRem(465) pxToRem(557)
    )
));
@include animation(anMeinv 2s ease-out forwards);
*/
$browserPrefix:('-webkit-','-moz-','-ms-','-o-','');
@mixin transition($obj){
    @each $i in $browserPrefix{
        #{$i}transition:$obj;
    }
}
@mixin transform($obj){
    @each $i in $browserPrefix{
        #{$i}transform:$obj;
    }
}
@mixin animation($obj){
    @each $i in $browserPrefix{
        #{$i}animation:$obj;
    }
}
@mixin keyframes($name,$obj){
    @-webkit-keyframes #{$name}{
        @each $i,$val in $obj{
            #{$i}{
                @each $j,$val2 in $val{
                    #{$j}:$val2;
                }
            }
        }
    }
    @-moz-keyframes #{$name}{
        @each $i,$val in $obj{
            #{$i}{
                @each $j,$val2 in $val{
                    #{$j}:$val2;
                }
            }
        }
    }
    @-ms-keyframes #{$name}{
        @each $i,$val in $obj{
            #{$i}{
                @each $j,$val2 in $val{
                    #{$j}:$val2;
                }
            }
        }
    }
    @-o-keyframes #{$name}{
        @each $i,$val in $obj{
            #{$i}{
                @each $j,$val2 in $val{
                    #{$j}:$val2;
                }
            }
        }
    }
    @keyframes #{$name}{
        @each $i,$val in $obj{
            #{$i}{
                @each $j,$v in $val{
                    #{$j}:$v;
                }
            }
        }
    }
}
相关文章
|
4月前
|
JavaScript 前端开发
前端 JS 经典:统一 Vite 中图片转换逻辑
前端 JS 经典:统一 Vite 中图片转换逻辑
64 0
|
JavaScript 编译器
Babel对ES6模块化代码转换、ES6模块化引入NPM包
Babel对ES6模块化代码转换、ES6模块化引入NPM包
95 0
antd组件库封装41-文件结构和代码规范
antd组件库封装41-文件结构和代码规范
92 0
antd组件库封装41-文件结构和代码规范
antd组件库封装41-文件结构和代码规范
antd组件库封装41-文件结构和代码规范
81 0
antd组件库封装41-文件结构和代码规范
antd组件库封装55-通用测试jest
antd组件库封装55-通用测试jest
93 0
antd组件库封装55-通用测试jest
antd组件库封装44-添加字体变量方案
antd组件库封装44-添加字体变量方案
91 0
antd组件库封装44-添加字体变量方案
|
编解码 Linux 编译器
FFmpeg引入x264扩展
FFmpeg引入x264扩展
222 0
|
移动开发 JavaScript weex
week-iOS的扩展之内置模块,将原生模块做成标签在weex中使用
week-iOS的扩展之内置模块,将原生模块做成标签在weex中使用
119 0
week-iOS的扩展之内置模块,将原生模块做成标签在weex中使用