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); }