我想通過使用SCSS來清理我的CSS,使其更清潔。利用CSS vs Sass(SCSS) - 基類問題和redundency
標準CSS:
.dark-hr,
.light-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
background-color: #595959;
}
.light-hr {
background-color: #cccccc;
}
VS SCSS:
.generic-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
@extend .generic-hr;
background-color: #595959;
}
.light-hr {
@extend .generic-hr;
background-color: #cccccc;
}
有什麼辦法,以避免創建將不使用的 '通用小時' 級?我希望某種巢能很好地工作。 在這種情況下,CSS絕對比SCSS更乾淨,更易讀。
理想情況下,我需要這SCSS工作:
.## {
// base class that is not outputted
.dark-hr {
//attributes the extend the base class '.##'
}
.light-hr {
//attributes the extend the base class '.##'
}
}
OUTPUT:
.dark-hr, .light-hr {
//shared attributes defined by '.##'
}
.dark-hr {
// overrides
}
.light-hr {
// overrides
}
您可以使用'[class * =' - hr']',它基本上表示任何具有'-hr'的類,至少不需要'@ extend'每次,如果你選擇添加更多'。-hr'類,你將不會n eed編輯/擴展任何東西 – ashley
@ashley您*可以*這樣做,但如果您需要添加一個沒有「-hr」後綴但擴展了'.light-hr'的類,會發生什麼?你必須記住延長'[class * =' - hr']',如果項目已經擱置了幾個月,這很容易被遺忘。 – cimmanon