CODEWITHSUNDEEP
cssangularsass
RasMason
RasMason

Reputation: 2212

invalid property value scss function

I've set up some scss files/folders that load in the following way (Angular project)

1) Settings - which have colour settings for the project, as well as some functions 2) Files and folders that define variables fonts, widths, etc. for the components and pages'
3) Files and folders that use the variables for classes

The problem I'm having is; the functions I've created in the settings file are not working and giving an invalid property value

enter image description here

_settings: loaded first

$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: loaded second

$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: loaded last

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

The reason I'm doing this way is that I want to have multiple apps using the same code (last loaded) and just update 1st and second loaded

Upvotes: 1

Views: 1047

Answers (1)

Ari
Ari

Reputation: 1703

You have a tiny mistake. The brand-colour function's 2nd argument is $colours, but you're not using the argument, you're using the default value. Here's a DEMO...

The brand-colour function is just map-get whose 2nd argument has a default value. It doesn't add any value + adds unnecessary complexity to your code. I'd recommend just using map-get...

Upvotes: 2

Related Questions