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

SASS函数将px转换为em

1 个答案: