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

最新推荐文章于 2024-09-26 18:52:35 发布

大波起司

最新推荐文章于 2024-09-26 18:52:35 发布

阅读量3.5k

点赞数

分类专栏：个人问题记载文章标签： css html calc

本文链接：https://blog.csdn.net/ma_luping/article/details/108442149

版权

个人问题记载专栏收录该内容

9 篇文章 0 订阅

订阅专栏

移动端项目，做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);
    }