scss中使用calc函数,包含变量的函数使用

移动端项目,做rem适应,任何元素的高宽边距等都使用这个函数返回的变量;

@function px2em($px, $base-font-size: 75px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2em($px + 0px); // That may fail.
    }

    @else if (unit($px)==rem) {
        @return $px;
    }

    @return ($px / $base-font-size) * 1rem;
}

使用calc的时候,则下面#{px2em(321px)}的方法,如下

p{
        width: px2em(642px);
        height: px2em(80px);
        border-radius: px2em(28px);
        line-height: px2em(80px);
        text-align: center;
        background: white;
        color: #4A7DF1;
        border: 1px solid #4A7DF1;
        font-weight: bold;
        position: absolute;
        bottom: px2em(100px);
        left: calc(50% - #{px2em(321px)});
        @include font-dpr(16px);
    }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值