css - 无效的属性值 scss 函数

Question

我设置了一些以下列方式加载的 scss 文件/文件夹(Angular 元素)

1) Settings - 有元素的颜色设置，以及一些功能 2) 为组件和页面定义变量字体、宽度等的文件和文件夹'
3) 使用类变量的文件和文件夹

我遇到的问题是；我在设置文件中创建的功能无法正常工作并提供无效的属性值

_settings:首先加载

$brand-colours: (
    text:                       #2F2F2F,
    text-white:                 #FFFFFF,
    primary-bg-colour:          #F3F3F3,
    heading:                    #5C1544,
    border:                     #969696,
    borderSecondary:            #DCDCDC,
    primary:                    #0068AA,
    secondary:                  #D11E4F,
    focusState:                 #F6C037,
    focusBackgroundState:       #FFF7E6,
    hoverState:                 #00B2CF,
    hoverBackgroundState:       #00B2CF,
    activeState:                #00B2CF,
    errorState:                 #D91F26,
    validState:                 #C5DA46,
    panelLightBlue:             rgb(0, 0, 0)
);

@function brand-colour($colour, $colours: $brand-colours) {
    @return map-get($brand-colours, $colour);
}

_body:第二个加载

$body-bg-colour:                brand-color('primary-bg-colour') !default;
$body-bg-colour-1:              #FFFFFF !default;
$body-colour:                   brand-colour('text');
$body-font-family:              'ProxinaNova';

_body: 最后加载

body {
    background-color: $body-bg-colour-1;
    color: $body-colour;
    font-family: $body-font-family;

    @include hg-mq('med') {
        background-color: $body-bg-colour;
    }
}

在 style.scss 中

@import 'settings/settings';
@import 'base/body';
@import 'shared/body';

我这样做的原因是我想让多个应用程序使用相同的代码(最后加载)并且只更新第一个和第二个加载

Answer 1

你犯了一个小错误。 brand-colour 函数的第二个参数是 $colours，但您没有使用该参数，您使用的是默认值。这是一个 DEMO ...

brand-colour 函数就是 map-get，它的第二个参数有一个默认值。它不会增加任何值(value) + 会为您的代码增加不必要的复杂性。我建议只使用 map-get...