时间戳

首页 > 解决方案 > SASS 函数将 px 转换为 em

css - SASS 函数将 px 转换为 em

问题描述

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

标签： csssass

解决方案

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

推荐阅读