父元素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

CSS Float 與 CSS Hack Clearfix

常常聽到float就要配上clearfix，但是為什麼呢？

子元素浮動到上層之後，在某些情況下會造成所謂「父元素的高度塌陷」，也就是原本包住子元素的容器會因為子元素全部都浮動脫離原有的DOM序，造成高度預設為auto的父元素「沒有內容」而失去高度。

附上範例：How clearfix works

SASS：
.clearfix
  &:before
    content: ""
    display: table
  &:after
    content: ""
    display: table
    clear: both
  zoom: 1


CSS：
.clearfix, {
  zoom: 1;
}
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}