CSS文件单位匹配转换

• 最近在项目中需要将一个全为px单位的css文件转换为rem单位的文件。
• 写了个函数来互相转化css文件中各种单位
• 直接上代码

/**
 * css单位倍数转换
 * @text：css字符串
 * @time:转后倍数（0.1 10）
 * @unit:单位
 * @toUnit:转为什么单位(非必传,不传为原单位)*/
function zoomUnit(text, times, unit, toUnit) {
    //匹配所有这个单位
    var unitRe = new RegExp("\\s*(\\d+)*(\\.)*(\\d+)" + unit, "img");
    //转化后单位
    var tranUnit = toUnit || unit;
    //匹配
    return text.replace(unitRe, function (x) {
        var result = x.trim().replace(unit, "");
        result = parseInt((+result) * 10000, 10) * times / 10000;
        return result + tranUnit;
    });
}

调用举例:px转rem

var cssText = `
div{
    position: relative;
    float: left;
    background: #2f3136;
    margin: 0 6px 0 9px;
    padding:0 0 9px 10px;
    width: 120px;
    height: 36px;
    line-height: 36px;
    border-radius: 40px;
}
`
var result = zoomUnit(cssText,0.1,'px','rem');
console.log(result)

• 输出结果

div{
    position: relative;
    float: left;
    background: #2f3136;
    margin: 0 0.6rem 0 0.9rem ;
    padding:0 0 0.9rem  1rem ;
    width: 12rem ;
    height: 3.6rem ;
    line-height: 3.6rem ;
    border-radius: 4rem ;
}

rem转px

var cssText = `
div {
    position: relative;
    float: left;
    background: #2f3136;
    margin: 0 .6rem 0 .9rem;
    padding: 0 0 0.9rem 1rem;
    width: 12rem;
    height: .6rem;
    line-height: 3.6rem;
    border-radius: 4rem;
}
`
var result = zoomUnit(cssText,100,'rem','px');
console.log(result);

• 输出结果

div {
    position: relative;
    float: left;
    background: #2f3136;
    margin: 0 60px  0 90px ;
    padding: 0 0 90px  100px ;
    width: 1200px ;
    height: 60px ;
    line-height: 360px ;
    border-radius: 400px ;
}