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

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

CodePudding user response：

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

CodePudding user response：

You could write it like this:

.app__footer-card {
  &-mobile, &-email {
    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; }
}

CodePudding user response：

You can do this with css by moving the shared css into a common class

.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 >
  <img src="" alt="email" />
  <a href="mailto:[email protected]">[email protected]</a>
</div>
<div >
  <img src="" alt="mobile" />
  <a href="tel:0415560320">0415560320</a>
</div>