井井客

搜索

SCSS中利用函数进行rem与px单位转换

在sublime编辑器中有rem转换的插件,而它并不算是全能的,动手在SCSS中自定义函数进行rem转换也不失为一种好的选择。

SCSS中利用函数进行rem与px单位转换

刚开始接触到rem的时候我就是使用的sublime中的插件,只要输入数字+px后就能自动帮我转换成rem,并且这个rem的比例也是可以自己定义的。

详情看这里:https://github.com/hyb628/cssrem

这种傻瓜式的插件非常方便~但是在遇到个别情况时可能就有点不那么合适了,例如考虑到页面写成rem后,还想保留px单位的数值,肿么办呢,这就需要自己通过CSS预处理自定义函数来完成了。

插一句话,之前我用的是less,入门也简单,现在使用scss,感觉语法上面大差不差,但是scss/sass的功能好像真的丰富了一点。

下面贴上自定义的函数(文件名:_mixin.scss),注释中有分析,这里就不分析了:

@charset "UTF-8";
//rem(val) -- 传入数值换算出rem (比例32即一个页面分成了20格:1rem = 32px)
@function rem($val){ @return $val/32+rem; }

//check rem(val) -- 判断传入数值是正数、auto、0,如果是正数则换算出rem结果
@function checkRem($val){ @if $val == auto{ @return auto; }@else if $val==0{ @return 0; }@else{ @return rem($val); }}

//check px(val) -- 判断传入数值是正数、auto、0,如果是正数则在后面添加px单位
@function checkPx($val){ @if $val == auto{ @return auto; }@else if $val==0{ @return 0; }@else{ @return $val+px; } }

//@mixin box(val,t,r,b,l) -- 根据盒子模型来,有四个方位值(仅写一个方法值也可),同时输入带rem和px单位的结果
@mixin box($box,$t,$r:$t,$b:$t,$l:$r){ 
    #{$box}:checkPx($t) checkPx($l) checkPx($b) checkPx($l);
    #{$box}:checkRem($t) checkRem($r) checkRem($b) checkRem($l);
}

//@mixin point(val,val) -- 指定属性,同时输入带rem和px单位的结果
@mixin point($poi,$val){
    #{$poi}:checkPx($val);
    #{$poi}:checkRem($val);
}

$borGray:#e8e8e8;

注意:前面的rem、checkRem、checkPx这三方法只是辅助性的方法,box与point才是最终需要使用的方法。
现在我们就可以在index.scss文件中引入_mixin.scss后使用box与point这两个终极方法了,如下:

@charset "UTF-8";
@import '_mixin.scss';
.border {
    border-bottom:1px solid $borGray;
}
.top {
    @include point(width,200);
    @include box(margin,0,auto,50);
    @extend .border;
}

point方法比较好理解,box方法我们就可以理解跟盒子模型一样,在属性后面我现在只是跟了三个值,你也可以跟1个值2个值4个值,自己试试就知道效果了。
稍微需要注意一点,两个scss文件上面我都使用了@charset "UTF-8";这条语句,否则中文注释的时候可能会报错。
看一下生成结果:

.border, .top {
  border-bottom: 1px solid #e8e8e8;
}
.top {
  width: 200px;
  width: 6.25rem;
  margin: 0 auto 50px auto;
  margin: 0 auto 1.5625rem auto;
}

写到这里差不多告一段落,语句实在不太难,但是感觉写得也满有意思的。

总结其实使用插件与这种自定义函数各有利弊,插件写代码相对更快捷,而自定义函数代码写得比较多但是看起来更明朗,最终还是需要根据项目需要选择适合的方法~
另外如果不想输出px单位的话,可以将mixin文件中box与point的第一行输入px的代码删除就可以了。

文章TAG:scss

作者:井井客原创来源:原创
本文标题:SCSS中利用函数进行rem与px单位转换
本文链接:/c/20170.html

上一篇:初级仿手机端dialog弹窗
下一篇:JQ伪下拉刷新思路[滚动到底部时操作]

文章分类

相关阅读

随便看看