Tidy up some SCSS - html

Question

I have some code that controls a charity area on a site. The charity area has many different charity sectors and these all have their own colours. I have attached my SCSS below but wondered if there is a better way to write and apply this. So far I just need each charity colour to be applied as a 'background-color' but be able to have a tint of each. My code works fine but I'm sure there is a better way of writing this.
Thank you for any help in advanced.
/**************************************
Charity Colours
****************************************/
$color-animals: #a9efea;
$color-babies: #fae08c;
$color-cancer: #f4c9c8;
$color-community: #b3ddf2;
$color-deaf: #9FC279;
$color-mental: #CB89D5;
$color-elderly: #CCDCD4;
$color-rescue: #F4BD88;
$color-medical: #D0879C;
$color-hospice: #F0D3FA;
$color-human: #D3E0AD;
$color-military: #CBC3AD;
$color-overseas: #96C0E5;
$color-sports: #939393;
.animals-bg {
background:$color-animals;
}
.babies-bg {
background:$color-babies;
}
.cancer-bg {
background:$color-cancer;
}
.community-bg {
background:$color-community;
}
.deaf-bg {
background:$color-deaf;
}
.mental-bg {
background:$color-mental;
}
.elderly-bg {
background:$color-elderly;
}
.rescue-bg {
background: $color-rescue;
}
.medical-bg {
background:$color-medical;
}
.hospice-bg {
background:$color-hospice;
}
.human-bg {
background:$color-human;
}
.military-bg {
background:$color-military;
}
.overseas-bg {
background:$color-overseas;
}
.sports-bg {
background:$color-sports;
}
// Colour Tint for Lighter Background
$color-tint: 0.3;
.animals-bg--tint {
background: rgba($color-animals, $color-tint);
}
.babies-bg--tint {
background: rgba($color-babies, $color-tint);
}
.cancer-bg--tint {
background: rgba($color-cancer, $color-tint);
}
.community-bg--tint {
background: rgba($color-community, $color-tint);
}
.deaf-bg--tint {
background: rgba($color-deaf, $color-tint);
}
.mental-bg--tint {
background: rgba($color-mental, $color-tint);
}
.elderly-bg--tint {
background: rgba($color-elderly, $color-tint);
}
.rescue-bg--tint {
background: rgba($color-rescue, $color-tint);
}
.medical-bg--tint {
background: rgba($color-medical, $color-tint);
}
.hospice-bg--tint {
background: rgba($color-hospice, $color-tint);
}
.human-bg--tint {
background: rgba($color-human, $color-tint);
}
.military-bg--tint {
background: rgba($color-military, $color-tint);
}
.overseas-bg--tint {
background: rgba($color-overseas, $color-tint);
}
.sports-bg--tint {
background: rgba($color-sports, $color-tint);
}

Answer 1

Modified SCSS:
$charity-colors: (
animals: #a9efea,
babies: #fae08c,
cancer: #f4c9c8,
community: #b3ddf2,
deaf: #9FC279,
mental: #CB89D5,
elderly: #CCDCD4,
rescue: #F4BD88,
medical: #D0879C,
hospice: #F0D3FA,
human: #D3E0AD,
military: #CBC3AD,
overseas: #96C0E5,
sports: #939393
);
#each $sector, $color in $charity-colors {
.#{$sector}-bg {
background: $color;
}
.#{$sector}-bg--tint {
background: rgba($color, $color-tint);
}
}