Hi all, I am fairly to new SCSS, and trying to create 3 classes each for a set of 5 name and value pairs. It works, but the outputted css shows each class 5 times! So something is being wrongly referenced here:

$colours: (
    white: #fff,
    purple: #20123a,
    green: #39C271,
    duskblue: #000473,
    skyblue: #41B8BC
);

@each $name, $value in $colours {
    .#{$name} {
        color: $value !important;
    }
    .#{$name}-bg {
        background-color: $value !important;
    }
    .#{$name}-border {
        border-color: $value !important;
    }
}

Let me know what I am doing wrong here! Thanks

Could you give an example of the CSS you expect it to output?

I am aiming for the following:

.white {
    color: #fff !important;
}
.white-bg {
    background-color: #fff !important;
}
.white-border {
    border-color: #fff !important;
}

.purple {
    color: #20123a !important;
}
.purple-bg {
    background-color: #20123a !important;
}
.purple-border {
    border-color: #20123a !important;
}

etc..

Thanks

I ran your code on  https://www.sassmeister.com to see the output, and that's exactly what you get back. Maybe I'm not understanding  something?

Ah I think my error is not coming from this bit of code... Thanks for the resource link though that will be helpful for future tests