我有兩個類名為“app__footer-card-email”和“app__footer-card-mobile”的按鈕。
除了背景顏色不同之外，它們在 css 方面是相同的按鈕。
在這種情況下，有哪些有效的方法可以減少 scss 中的重復？我什至在尋找多種選擇，因此我也可以將該原則應用于其他 scss 實體。謝謝！
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;
}
uj5u.com熱心網友回復：
您可以創建一個與您的兩個按鈕類相似的通用類名，然后在您的自定義樣式中擴展通用類；如下所示：
.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;
}
uj5u.com熱心網友回復：
你可以這樣寫：
.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; }
}
uj5u.com熱心網友回復：
您可以通過將共享的 css 移動到一個公共類中來使用 css 執行此操作
.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" />
<a href="mailto:[email protected]">[email protected]</a>
</div>
<div class="app__footer-card app__footer-card-mobile">
<img src="" alt="mobile" />
<a href="tel:0415560320">0415560320</a>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/512281.html
標籤：css粗鲁的
上一篇：來自檔案的背景影像