Question

我有一个用于保存标题样式的Sass地图。我循环遍历地图并使用css规则的键：值对。我想使用一个函数将像素转换为rem单位。当mixin为标题运行时，不会评估该函数。

Sass地图

$headers: (
    alpha: (
        font-size: get-relative-font-size(36px, $font-size-base, ''),
        font-weight: 700,
        color: $ra-color-black,
    ),
    beta: (
        font-size: 24px,
        font-weight: 500,
        color: $ra-color-black,
    ),
);

密新

@mixin getHeader($header) {
    @if (map-has-key($headers, $header)) {
        $styles: map-get($headers, $header);
        @each $property, $value in $styles {
            #{$property}: $value;
        }
    } @else {
        @warn 'No styles found for #{$header} header';
    }
}

功能

@function get-relative-font-size($actual, $relative: $font-size-base, $unitType: 'rem') {
    @if $unitType == 'rem' {
        @return #{($actual / $font-size-base)}rem;
    } @else {
        @return ceil(percentage($actual / $relative));
    }
}

以下是浏览器中的输出。

font-size: get-relative-font-size(36px, 16px, "");
font-weight: 700;
color: #000;

奇怪的是，如果我将代码放入Sassmeister中，它会按预期工作，https://www.sassmeister.com/gist/df18795eaec5737d61e13b435e841cd0

这是针对angular-cli（v1.5.0）项目。我看到正在使用node-sass v4.6.0。

包含函数的Sass映射

0 个答案: