在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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

代碼效果圖如下,就是點(diǎn)擊按鈕的時(shí)候變化樣式。

clipboard.png

感覺下面的代碼太冗余了,2個(gè)樣式類內(nèi)容基本一樣只是文字顏色和背景色變了。 一般這種情況該如何寫讓代碼更精簡(jiǎn)?

.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預(yù)處理器less或sass,把公共的樣式封裝成一個(gè)可以重用的類,可以看看這里:https://www.w3cplus.com/css/less

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

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

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

使用時(shí)

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