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 -

ios - MKMapView fails to load tiles with HTTP 410 error -

c# - How to utilize EF and LINQ to add filters and specify tables, columns, filters and order by dynamically -