/ Published in: CSS
Simple snippet for calculation font-size, line-height, and margin-bottom.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
@defaultfontsize: 16; @defaultlineheight: @defaultfontsize*1.375; .font(@fontsize:16,@lineheight:22,@multiplier:1,@lineheightreducer:1) { font-size: (@fontsize/@defaultfontsize)*1em; line-height: @lineheight/@fontsize/@lineheightreducer; margin: 0 0 (@lineheight/@fontsize*(@multiplier/(@lineheight/@defaultlineheight)))*1em 0; } .boxes(@paddingtop:1,@paddingbottom:1,@bordertop:0,@borderbottom:0) { @border-top-width: @bordertop*1px; @border-bottom-width: @borderbottom*1px; padding-top: e(%("%sem%s", (((@paddingtop*@defaultlineheight)-@bordertop)/@defaultfontsize), `@{bordertop}>=1?'; border-top-width: @{border-top-width}':''` )); padding-bottom: e(%("%sem%s", (((@paddingbottom*@defaultlineheight)-@borderbottom)/@defaultfontsize)*1, `@{borderbottom}>=1?'; border-bottom-width: @{border-bottom-width}':''` )); } h1 { .font(48,25); }