loops - LESS mixin recursion error to convert pixels to rems -


i trying make mixin propery convert pixels relative ems. flexible enough allow property used number of pixel values.

any ideas on how add multiple values single property without recursion error i'm creating inside loop?

desired usage example 1:

.pixels-to-rems(font-size; 10); 

desired output:

font-size: 10px; font-size: 1rem; 

desired usage example 2:

.pixels-to-rems(padding; 10,0,20,10); 

desired output:

padding: 10px, 0px, 20px, 10px; padding: 1rem, 0px, 2rem, 1rem; 

here's mixin is.

@basefontsize: 10px; .pixels-to-rems(@property, @pxvals) {     @pxvalue: null;     @remvalue: null;      .for(@pxvals); .-each(@pxval) {         @pxvalue: @pxvalue @pxval;         @remvalue: @remvalue (@pxval / @basefontsize);     }      @{property}: ~"@{pxvalue}px";     @{property}: ~"@{remvalue}rem"; } 

.for() mixin found here

see merge feature. trick merge statement concatenate values same property rule, you'll have isolate px , rem rules via hack. example this:

usage {     .pixels-to-rems(padding, 10 0 20 10);     .pixels-to-rems(font-size, 50); }  // impl.:  @base-font-size: 10px;  .pixels-to-rems(@p, @vs) {     .for(@vs); .-each(@v) {         @{p}+_:     1px  * @v;         @{p}@{-}+_: 1rem * @v / @base-font-size;     }     @-: ~" "; }  // .for-each impl. (stripped snipped linked in question)  .for(@array)                 {.for-impl_(length(@array))} .for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))} .for-impl_(@i) when (@i > 0) {.-each(extract(@array, @i))} 

demo.


Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -