problem description

sass formulates different styles of skin according to a certain parameter, how to write css in this case?

the environmental background of the problems and what methods you have tried

Environment: sass,vue.
A company project is a set of code that outputs multiple products, determines the product by the fields returned in the background, and then loads different styles. The difference between products lies in their style and color (skin).

the previous method was to set an id for the outermost div of each product, and then add a css for each product through the nesting feature of the sass. This results in assigning and pasting a large piece of common css code for each product added. So I would like to ask if there is a better way to ask for help!

related codes

/ / Please paste the code text below (do not replace the code with pictures)

html is simplified to display different color styles based on the fields returned in the background.

//1 -> skin 1
<div id="app">
    <div id="skin-1">
        1
    </div>  
</div>
//2 -> skin 2
<div id="app">
    <div id="skin-2">
        1
    </div>  
</div>

//sass

//
$color-1:red;
$color-2:green;

-sharpapp{
    & -sharpskin-1{
        background-color:$color-1;
    }
    & -sharpskin-2{
        background-color:$color-2;
    }
}

what result do you expect? What is the error message actually seen?

I would like to ask if there is another way? A rookie who just started the profession is not very good at it.