SASS 函数将 px 转换为 em答案

【问题标题】：SASS function to convert px to emSASS 函数将 px 转换为 em
【发布时间】：2021-03-28 19:09:29
【问题描述】：

我正在尝试实现一个 SASS 函数，该函数将为我们的应用程序将像素转换为 em，但遇到了麻烦。

函数如下：

$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 类并且我不明白为什么时才有效。我认为调用该函数的第二个类足以设置大小。

【问题讨论】：

it only works if I have the .k-grid-header class 是什么意思？在哪种情况下这不起作用？你能举一个复制你的问题的例子吗？一个有效，一个无效？
如果有帮助，有一个 npm 包可以将其更改为 rem：npmjs.com/package/sass-rem。否则这似乎与 em 等效：npmjs.com/package/sass-em
font-size: em(16); 生成的 CSS 是什么？
如果不是像素，为什么要将其转换为像素？这个函数中的任何东西都不需要像素
如果你没有 .k-grid-header 类，还有什么不起作用？在 sassmeister 中，所有代码方面的内容对我来说都很好

标签： css sass

【解决方案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;
}

用法：

font-size:em(32px); // => font-size:2em;

【讨论】：