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
Post a Comment