父元素hover時變更子元素背景顏色 child element color change when hovering over parent

常常在滑入parent element時，需要去修改child element的color或屬性，在child element沒有設定時，是不需要特別去處理的，當有設定時，可以在hover後加上元素的設定即可。

SASS：
  parent:hover
    background-color: $color-primary !important
    color: $color-font-hover !important
    h3 //child
      color: $color-font-hover !important //key point

Before:
    .parent .child:hover {
         background-color: #00aba7;
         color: #fff;
    }

After:
    .parent:hover .child {
         background-color: #00aba7;
         color: #fff;
    }


附上範例：child element color change when hovering over parent

刪除inline-block元素間的空白間距

使用inline-block來代替float的案例很多。

但使用後最常碰到的問題是在inline-block的元素之間會有個「4px」的空白間距。

處理方法很簡單，目前最通用的方法是在inline-block的父元素上加上font-size: 0，然後在inline-block元素加上原本要顯示的font-size例如font-size: 16px。

附上範例：remove inline-block spacing