In my Angular project, I have organized my scss files/folders in the following way:
1) Settings - containing color settings and functions for the project
2) Files and folders defining variables such as fonts, widths, etc. for components and pages
3) Files and folders using these variables for classes
The issue I'm facing is that the functions created in the settings file are not working and giving an error of invalid property value.
https://i.sstatic.net/gpEVd.png
_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';
I have structured it this way to allow multiple apps to use the same code (last loaded) while only updating the first and second loaded files.