Convert px to em in Less

Question

What is the equivalent of Scss\' emCalc() in less?

padding: emCalc(24px);

in Scss will calculate em based on the viewpoint and

Answer 1

If you're compiling your LESS on the server side, you can do this with CSSHub

/* Test unit convert */
div {
  .unit-convert(font, ~'bold em(14px)/1.2 @{csshub_font-stack-arial}');

  // Ignore base: @csshub_font-size: 100%;
  .unit-convert(margin, ~'rem(18px) rem(20px) rem(15px)', true);

  // Default: 100% == 16px == 1em == 12pt == 1rem
  .unit-convert(font-size, ~'px(100%)');         // Test: % to px
  .unit-convert(font-size, ~'pt(16px)');         // Test: px to pt
  .unit-convert(font-size, ~'em(12pt)');         // Test: pt to em
  .unit-convert(font-size, ~'rem(1em)');         // Test: em to rem
  .unit-convert(font-size, ~'percent(1rem)');    // Test: rem to %
}

This generates this css

/* Test unit convert */
div {
  font: bold 0.875em/1.2 Arial, 'Helvetica Neue', Helvetica, sans-serif;
  margin: 1.125rem 1.25rem 0.9375rem;
  font-size: 16px;
  font-size: 12pt;
  font-size: 1em;
  font-size: 1rem;
  font-size: 100%;
}