Question

我已经设置了一些以以下方式加载的scss文件/文件夹（Angular项目）

1）设置-具有项目的颜色设置以及一些功能 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;
    }
}

in style.scss

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

之所以这样做，是因为我想让多个应用使用相同的代码（最后一次加载），并且只更新第一次和第二次加载

Answer 1

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

brand-colour函数只是map-get，其第二个参数具有默认值。它不会增加任何价值，也不会给代码增加不必要的复杂性。我建议只使用map-get ...

无效的属性值scss函数

1 个答案: