How to make scss code more efficient in this scenario

Issue

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"/>
        <a href="[email protected]">[email protected]</a>
      </div>
      <div className="app__footer-card-mobile">
        <img src={images.mobile} alt="mobile"/>
        <a href="0415560320">0415560320</a>
      </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;
}

Solution

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;
}


Answered By – N.SH

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published