Development environment / tools:
vue.js Mini Program stylus
code is shown below, which changes the style when the button is clicked.
feels that the following code is too redundant, the contents of the two style classes are basically the same, but the text color and background color have changed. In general, how to write in this case to make the code more concise?
.menuItem
float left
width 80px
height 40px
line-height 40px
margin-right 8px
text-align center
color -sharpaeaeae
font-size 14px
border-radius 10px
background-color -sharpfff
.menuItem-actived
float left
width 80px
height 40px
line-height 40px
margin-right 8px
text-align center
color -sharpfff
font-size 14px
border-radius 10px
background-color $themeColor