定义SASS函数,方便WAP\PC端的样式数值快速切换

编    写:晋哲

时    间:2016-03-04

说    明:因移动端页面样式都是原尺寸的二分之一,PC专题页固定模板直接引用移动端页面的样式还需要返工去将所有的数值型属性值改回来,为方便两端之间的样式切换,提高效率,建议此类专题使用SASS去写样式,并使用下面定义的函数。

//定义函数
@function math($num) {
    @return $num / 2;
}

//SASS中使用函数,如以下常用的一些数值型属性
.icon {
    top: math(40%);
    margin: math(20px);
    width: math(100px);
    height: math(40px);
    font-size: math(30px);
    background-position: math(-10px) math(-20px);
    background-size: math(240px);
}

//生成的移动端CSS代码
.icon {
    top: 20%;
    margin: 10px;
    width: 50px;
    height: 20px;
    font-size: 15px;
    background-position: -5px -10px;
    background-size: 120px;
}

当需要生成PC端样式时,只需修改函数内的被除数即可。

发表评论