css - vertical rhythm using less -
recently, i've read this article vertical rhythm , i'm trying implementation based on article using less , wondering if i'm doing right way because based on math 24px font have line height of 1px if math. :d ( never @ math ).
.font-size(@target-px-size, @context-px-size: @base-font-size) { font-size: @topx; font-size: @torem; .rem(@target-px-size, @context-px-size); } .rhythm(@target-px-size) { .font-size(@target-px-size); @result: unit((@base-line-height / @target-px-size)); line-height: @result; margin-top: unit(@result, px); margin-top: unit(@result, rem); margin-bottom: unit(@result, px); margin-bottom: unit(@result, rem); } // rem calculator .rem(@target-px-size, @context-px-size: @base-font-size) { @divide-by: unit(@context-px-size); @sizevalue: unit(@target-px-size); @remvalue: round(@sizevalue / @divide-by, 1); @topx: unit(@sizevalue, px); @torem: unit(@remvalue, rem); }
this seems work. have checked against different values using site vertical rhythm
vertical rhythm mixin
.font-size(@target-px-size, @context-px-size: @base-font-size-px) { .rem(@target-px-size, @context-px-size); font-size: @topx; font-size: @torem; } .rhythm(@target-px-size) { .font-size(@target-px-size); @result: unit((@base-line-height-px / @target-px-size)); line-height: @result; margin-top: unit(@result, px); margin-top: unit(@result, rem); margin-bottom: unit(@result, px); margin-bottom: unit(@result, rem); } .rem(@target-px-size; @context-px-size: @base-font-size-px){ @ratio: 1 / @context-px-size; @result: unit(@target-px-size * @ratio); @topx: unit(@target-px-size, px); @torem: unit(@result, rem); } // usage @base-font-size-px: 12px; @base-line-height-px: 24px; .bacon { .rhythm(24); }
Comments
Post a Comment