Convert px to em in Less

后端 未结 7 1545
独厮守ぢ
独厮守ぢ 2021-01-01 07:34

What is the equivalent of Scss\' emCalc() in less?

padding: emCalc(24px);

in Scss will calculate em based on the viewpoint and

7条回答
  •  野趣味
    野趣味 (楼主)
    2021-01-01 07:46

    Another variant is shown here.

    /* 
    Toolkit: Rem
    ============
    .rem() takes a @property, and @list of values (in px or unitless) and
    converts to rem.
    e.g.,
    .selector {
        .rem( margin, 20 auto eggs 666% );
        .rem( font-size, 12 );
    }
    Makes life a little easier when working from designs specced in pixels.
    */
    
    .rem( @property, @list, @base: 16 ) {
    @n: length(@list);
    
    // Only convert numbers that are not percentages or 0;
    ._merge( @px ) when ( isnumber(@px) ) and not ( ispercentage(@px) ) and not ( @px = 0 ) {
        @rem: ( @px / @base );
        @{property}+_: unit(@rem, rem);
    }
    ._merge( @px ) when ( default() ) {
        @{property}+_: @px;
    }
    
    ._loop( @n ) when ( @n > 0 ) {
        ._loop((@n - 1));
    
        @val: extract(@list, @n);
        ._merge( @val ); // merges values onto @property with space character.
    }
    
    ._loop( @n );
    }
    

    Source: https://gist.github.com/dominicwhittle/66275e9014bec7ec1b6f

提交回复
热议问题