去单位
在使用scss过程中,一直会有个疑惑它的内部是如何运作的。实际上它的运作与现实生活中一直。如果你想要移除一个值的单位,你想要将它除以1单位。比如 50cm 我想取它的数字,那么我们除以1cm,得到结果是 50(由1cm x 50 = 50cm得出)。同理这个原理也适用于scss。
$number: 50px;
$value: $number / 1px;
// -> 50
由上面的原理写出以下scss function:
/// 单位移除
/// @param {Number} $number - 需要移除单位的
/// @return {Number} - 无单位的数字
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
这个计算可能看起来很奇怪,但实际上是有道理的。为了得到 $number 的1单位,我们可以将 $number 乘以 0,然后再加 1。
使用:
$number: 50px;
$value: strip-unit($number);
// -> 50
扩展: px转em
/// px 转 em
/// @param {Numbe