Can I create multiple css class name as one statement? - sass

Question

I'm just creating .scss file for styled my website. In this .scss will be using in 4 differences web page with the not same class name. Here is my sample.
.my-login {
.my-login__aside {
width: 605px;
padding: 3rem 3.5rem;
background-repeat: no-repeat;
background-size: cover;
.my-login__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
}
My question is "Can I duplicate my current .scss to other names without creating more statement ?".
I want the result like this when webpack compile my .scss file.
.my-login {
.my-login__aside {
width: 605px;
padding: 3rem 3.5rem;
background-repeat: no-repeat;
background-size: cover;
.my-login__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
}
.my-register {
.my-register__aside {
width: 605px;
padding: 3rem 3.5rem;
background-repeat: no-repeat;
background-size: cover;
.my-register__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
}
.my-verify {
.my-verify__aside {
width: 605px;
padding: 3rem 3.5rem;
background-repeat: no-repeat;
background-size: cover;
.my-verify__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
}
.my-reset {
.my-reset__aside {
width: 605px;
padding: 3rem 3.5rem;
background-repeat: no-repeat;
background-size: cover;
.my-reset__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
}

Answer 1

Finally, I can do it with a loop function.
$pages: login register verify reset;
#each $page in $pages {
.my-#{$page} {
.my-#{$page}__aside {
width: 605px;
padding: 3rem 3.5rem;
background-repeat: no-repeat;
background-size: cover;
.my-#{$page}__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
}
}