井井客

搜索

scss中为需要前缀的属性定义个@mixin

因为之前比较懒得写前缀-webkie-,这次在整理代码的时候就把这个都加上了,统一定义了一个mixin,比较特殊的是radius需要配合rem一起。

scss中为需要前缀的属性定义个@mixin

具体代码如下:

//rem换算
@function rem($val){ @return $val/32+rem; }
//检查获取的值是否需要进行rem换算
@function checkRem($val){
    @if $val == auto{ @return auto; }
    @else if $val==0{ @return 0; }
    @else{ @return rem($val); }
}
//添加-webkit-前缀(也可以新增其它前缀)
@mixin webkit($pro,$val){
    -webkit-#{$pro}:$val;
    #{$pro}:$val;
}
//添加border-radius的混合
@mixin radius($val){
    @include webkit(border-radius,checkRem($val));
}

在需要使用的地方添加:

@include radius(10);

编译之后的结果就是如下:

-webkit-border-radius: 0.3125rem;
border-radius: 0.3125rem;

查看更多可以看这里:SCSS中利用函数进行rem与px单位转换

文章TAG:scss

作者:井井客原创来源:原创
本文标题:scss中为需要前缀的属性定义个@mixin
本文链接:/c/11187.html

上一篇:css3制作鼠标移上去放大的效果
下一篇:前端开发中常用的20个正则表达式

文章分类

相关阅读

随便看看