鍍金池/ 問答/HTML/ 關(guān)于CSS樣式設(shè)計-部分代碼如何重用的問題

關(guān)于CSS樣式設(shè)計-部分代碼如何重用的問題

開發(fā)環(huán)境/工具：
vue.js 小程序 stylus

代碼效果圖如下，就是點擊按鈕的時候變化樣式。

clipboard.png

感覺下面的代碼太冗余了，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
回答
編輯回答
亮瞎她

用css預處理器less或sass,把公共的樣式封裝成一個可以重用的類，可以看看這里：https://www.w3cplus.com/css/less

2018年4月5日 04:49
編輯回答
尤禮

這種情況下，應該各司其職，一個css提供常態(tài)屬性(本例中的menuItem），一個提供個性屬性（本例中的actived），個性屬性在常態(tài)屬性基礎(chǔ)上生效，覆蓋同名屬性。
stylus改成如下的樣子

.menuItem.actived
    color #fff
    background-color $themeColor

使用時

<div class="menuItem actived"></div>
2017年6月15日 20:18