前提：有時候在開發過程中需要動態渲染類名，比如高亮顯示，active狀態等。

下面是react寫法，記錄一下：

<div className={counts>0?"logo highlight":"logo"} >
       <Icon  className={counts>0?"icon-shopping-cart highlight":"icon-shopping-cart"}  size="md" type="check-circle-o" />
</div>

這段程式碼的目的是當counts大於0的時候新增高亮狀態。

另外scss對於這種active寫法（例項 a標籤的hover狀態和普通標籤active狀態）： &表示引用父選擇符：

1）hover寫法

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

編譯後

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }
 

2）active狀態

 .icon-shopping-cart{
     color: #80858a;
     width: 30px;
     height: 30px;
     margin-top: 6px;
     &.highlight{
         color: #fff;
      }
}

編譯後

.icon-shopping-cart{
     color: #80858a;
     width: 30px;
     height: 30px;
     margin-top: 6px;

}
.icon-shopping-cart .highlight{
         color: #fff;
  }