1. 程式人生 > >stylus動態改變樣式

stylus動態改變樣式

當某個連結或元素被選中時可以時,需要改變其顏色或狀態,而stylus中提供&選擇器,&指向父選擇器,用於判斷父元素達到某條件時改變狀態,下面的例子中當父元素router-link有被選中(active)時,子元素改變顏色並加上下劃線。

//html
<router-link tag="div" class="tab-item" to="/recommend">
   <span class="tab-link"></span>
</router-link>

//css
.tab-link
      padding-bottom: 5
px color: $color-text-1 &.router-link-active .tab-link color: $color-theme border-bottom: 2px solid $color-theme