scss中写一个处理px转化rpx的函数

简介：因为特殊原因我比较懒，然后就打算写个scss函数帮我自己进行处理rpx，但是一入scss函数，就花费了不少的时间，下面代码展示。

scss 代码展示

<style lang="scss" scoped>
$multiple: 2rpx;
// 转换函数 (15) ==> 30rpx (15,30) ==> 30rpx 60rpx
// 转换函数 params 可传参数 无上限
@function cover($t...) {
  $i:1;
  $result:0;
  @while $i <= length($t) {
    @if($i == 1){
        $result: (nth($t,$i) * $multiple);
    }@else{
        $result: append($result, (nth($t, $i) * $multiple))
    }
    $i: $i + 1;
  }
  @return $result;
}

// 使用 后面是编译结果
.title {
	width: cover(375); // width:750rpx;
    height: cover(10); // height:20rpx;
    padding:cover(10,20,30,40); // padding:20rpx 40rpx 60rpx 80rpx;
    box-shadow: cover(0,1,16) rgba(56, 56, 71, 0.2); // box-shadow: 0 2rpx 16rpx rgba(56, 56, 71, 0.2);
}
</style>

说明

定义变量

$multiple: 2rpx; 自定义翻倍的尺寸变量

定义函数

@function 函数名字 () {}
@return 函数return

传入参数变成集合 $t

@function cover($t…) {}

内置函数 length()

函数主要用来返回一个列表中有几个值，简单点说就是返回列表清单中有多少个值

length(10px)
1

length(10px 20px (border 1px solid) 2em)
4

length(border 1px solid)
3

内置函数 nth()

nth() 函数用来指定列表中某个位置的值。不过在 Sass 中，nth() 函数和其他语言不同，1 是指列表中的第一个标签值，2 是指列给中的第二个标签值，依此类推。

nth(10px 20px 30px,1)
10px

nth((Helvetica,Arial,sans-serif),2)
“Arial”

nth((1px solid red) border-top green,1)
(1px “solid” #ff0000)

内置函数 append()

函数是用来将某个值插入到列表中，并且处于最末位。

append(10px 20px ,30px)
(10px 20px 30px)

append((10px,20px),30px)
(10px, 20px, 30px)

append(green,red)
(#008000 #ff0000)

append(red,(green,blue))
(#ff0000 (#008000, #0000ff))

内置循环 @while

@while是一个循环指令，其后跟着一个表达式，如果表达式的返回值为false，则停止循环。

// 使用
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

// 编译结果
.item-6 {
  width: 12em; 
}
.item-4 {
  width: 8em; 
}
.item-2 {
  width: 4em; 
}

内置条件语句 @if指令

@if指令接受表达式和使用嵌套样式,无论表达式的结果只不过是false或null。

// 使用
p{
    @if 10 + 10 == 20   { border: 1px dotted;   }
    @if 7 < 2     { border: 2px solid;  }
    @if null    { border: 3px double; }
}

// 编译结果
p {
  border: 1px dotted; 
}

结语：求求点赞。