Функция SASS для преобразования px в em

Question

Я пытаюсь реализовать функцию SASS, которая преобразует пиксели в ems для нашего приложения и сталкивается с проблемами.

Вот функция:

$browser-context: 16;

@function em($pixels, $context: $browser-context) {
  @if (unitless($pixels)) {
   $pixels: $pixels * 1px;
  }

  @if (unitless($context)) {
    $context: $context * 1px;
  }

  @return $pixels / $context * 1em;
}

, и я реализую эту функцию здесь:

.k-grid-header {
  font-size: 16px;
}

.k-grid-header .k-header:not(.k-widget) {
  font-size: em(16);
}

Моя проблема в том, что она работает, только если у меня есть .k-grid-header класса, и я не очень понимаю, почему.Я думаю, что второго класса, который вызывает функцию, будет достаточно, чтобы установить размер.

Answer 1

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
/// @example scss - Usage
///     strip-unit(10px) -> 10
///     strip-unit(2em) -> 2
///     strip-unit(3) -> 3
@function strip-unit($number) {
    @if type-of($number) == 'number' and not unitless($number) {
        @return $number / ($number * 0 + 1);
    }
    @return $number;
}

/// Convert value to em.
@function em($size, $base-font-size:16px) {
    @return strip-unit($size) / strip-unit($base-font-size) * 1em;
}