How to make scss code more efficient in this scenario - css

Question

I have two buttons with classnames of "app__footer-card-email" and "app__footer-card-mobile".
They are the same buttons css wise except they have different background colours.
What are some efficient methods of reducing repetition in scss in this scenario? I am even looking for multiple options so i can apply the principle to other instances of scss aswell. Thanks!
HTML
const Footer = () => {
return (
<>
<div className="app__footer">
<h3 className="head-text">Want to reach out?</h3>
<h3 className="head-text">Lets have a chat over some coffee.</h3>
<div className="app__footer-cards">
<div className="app__footer-card-email">
<img src={images.email} alt="email"/>
edwin.huang9#gmail.com
</div>
<div className="app__footer-card-mobile">
<img src={images.mobile} alt="mobile"/>
0415560320
</div>
</div>
</div>
</>
)
}
SCSS
.app__footer-card-mobile {
width: 360px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 2rem;
border: radius 0%;
background-color: #d0e2fe;
opacity: 0.7;
border-radius: 10px;
padding: 10px;
flex-direction: row;
align-items: center;
}
.app__footer-card-email {
width: 360px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 2rem;
border: radius 0%;
background-color: #ffc9d0;
opacity: 0.7;
border-radius: 10px;
padding: 10px;
flex-direction: row;
align-items: center;
}

Answer 1

Like the others have said, split out the shared properties into their own class, then change based on your variations (mobile, email, etc.).
You're already using SASS, so you can use nesting here to keep everything together nicely.
I've renamed the classes so you can see one way this could be done with BEM naming, but you can adjust to whatever suits best for you.
You should however use appropriate semantic elements.
.footer-card {
background-color: var(--background-color, #f2f2f2);
width: 360px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 2rem;
border: radius 0%;
opacity: 0.7;
border-radius: 10px;
padding: 10px;
flex-direction: row;
align-items: center;
&--mobile {
--background-color: #d0e2fe;
}
&--email {
--background-color: #ffc9d0;
}
}
const Footer = () => {
return (
<>
<footer className="footer">
<h3 className="footer__heading">Want to reach out?</h3>
<p className="footer__body">Lets have a chat over some coffee.</p>
<div className="footer__cards">
<div className="footer__card footer__card--email">
<img src={images.email} alt="email"/>
hi#example.com
</div>
<div className="footer__card footer__card--mobile">
<img src={images.mobile} alt="mobile"/>
55555555
</div>
</div>
</footer>
</>
)
}
Buttons and cards are something you'll find yourself repeating often, so it can also be smart to make yourself a mixin or function to do this more handily.

Answer 2

You can do this with CSS by moving the shared CSS properties into a common class, which is most efficient because there will be no unnecessarily duplicated CSS across classes.
.app__footer-card-mobile {
background-color: #d0e2fe;
}
.app__footer-card-email {
background-color: #ffc9d0;
}
.app__footer-card {
width: 360px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 2rem;
opacity: 0.7;
border-radius: 10px;
padding: 10px;
flex-direction: row;
align-items: center;
}
<h3>Want to reach out?</h3>
<h4>Lets have a chat over some coffee.</h4>
<div class="app__footer-card app__footer-card-email">
<img src="" alt="email" />
edwin.huang9#gmail.com
</div>
<div class="app__footer-card app__footer-card-mobile">
<img src="" alt="mobile" />
0415560320
</div>

Answer 3

You can create a general class name with the similarities of your two buttons classes and then extend the general class in your custom styles; Like below:
.btn{
width: 360px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 2rem;
border: radius 0%;
opacity: 0.7;
border-radius: 10px;
padding: 10px;
flex-direction: row;
align-items: center;
}
.app__footer-card-mobile {
#extend .btn;
background-color: #d0e2fe;
}
.app__footer-card-email {
#extend .btn;
background-color: #ffc9d0;
}