開發(fā)環(huán)境/工具：vue.js 小程序 stylus代碼效果圖如下，就是點擊按鈕的時候變化樣式。感覺下面的代碼太冗余了，2個樣式類內(nèi)容基本一樣只是文字顏色和背景色變了。 一般這種情況該如何寫讓代碼更精簡？.menuItem
float left
width 80px
height 40px
line-height 40px
margin-right 8px
text-align center
color #aeaeae
font-size 14px
border-radius 10px
background-color #fff
.menuItem-actived
float left
width 80px
height 40px
line-height 40px
margin-right 8px
text-align center
color #fff
font-size 14px
border-radius 10px
background-color $themeColor
1 回答
眼眸繁星
TA貢獻1873條經(jīng)驗 獲得超9個贊
這種情況下，應該各司其職，一個css提供常態(tài)屬性(本例中的menuItem），一個提供個性屬性（本例中的actived），個性屬性在常態(tài)屬性基礎上生效，覆蓋同名屬性。
stylus改成如下的樣子
.menuItem.actived color #fff background-color $themeColor
使用時
<div class="menuItem actived"></div>
添加回答
舉報
0/150
提交
取消