我有一个Sass Map ,用于保存 Headers 样式 . 我循环遍历 Map 并使用css规则的键:值对 . 我想使用一个函数将像素转换为rem单位 . 当mixin为 Headers 运行时,不评估该函数 .

Sass map

$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

@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

@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 .