PX TO EM SCSS

by Alexey Zakharov

HTML

<div class="size-144px">123</div>

SCSS

$browser-context: 16; // Default

@function em($pixels, $context: $browser-context, $add_em: 1) {
  @return #{($pixels/$context * $add_em)}em;
}

.size-144px{
    width: em(144);
    height: em(144,16,0.5);
    display: flex;
    justify-content: flex-end;

}

.size-40px{
    width: em(40);
}

.size-30px{
    width: em(30); // 30px
}
.size-14px{
  font-size: em(14);
}