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

CSS簡寫 CSS Shorthand

以下是簡寫的範例：

margin: 10px 9px 8px 7px;
padding: 10px 9px 8px 7px;
順序是：margin-top | margin-right | margin-bottom | margin-left。
padding的順序也跟margin相同。

font: italic small-caps bold 12px/20px Verdana;
順序是：font-style | font-variant | font-weight | font-size | line-height | font-family
font-size和font-family需同時存在才能寫簡寫。

background: #fff url(bg.gif) no-repeat fixed left top;
順序是：background-color | background-image | background-repeat | background-attachment | background-position。
background比較特殊的地方是沒有規定特定的特性質，可以只設定其中一個，而忽略其他的特性。但是如果沒有設，就會變成預設值，所以要設定background的時候要注意，可能因為預設值而不小心覆蓋掉其他的設定。

border: 1px solid #000;
順序是：border-width | border-style | border-color。
這樣的書寫就把四個邊都統一成一種寫法，如果上、右、下、左需要不同的樣式的話就再另外書寫成border-top | border-right | border-bottom | border-left。

list-style: disc url(bg.gif) outside;
list和background一樣，不一定要把全部屬性書寫出來，這邊的url也跟background一樣都是不加引號的，如果有需要用到背景圖的時候要注意。

outline: 1px dotted #fff;
outline的簡寫是跟border一樣的，但是因為並非所有瀏覽器都有支援，所以使用並不多，最常使用的情況是在沒有reset的頁面，設定outline: 0;，這是為了消掉Firefox的連結點了周圍會出現的虛線框。

color: #000;
顏色的簡寫很簡單，將原本6碼的顏色代碼兩兩一組，如果三組裡面的代碼都兩兩彼此相同，便可縮寫成3碼的簡寫。如#336699可以寫成#369，#ddeeff可以寫成#def，但是如果其中一組沒有兩兩彼此相同，那就得維持6碼的寫法。 如#334599只能維持6碼的寫法，這是沒辦法簡寫的，所以顏色的縮寫只有6碼和3碼這兩種而已。

margin: 0;
CSS的單位值有pt、px、em、cm、ex…很多種，但是當數值是0的時候，這些單位值就應該要省略，因為單位對0來說是沒有意義的。

CSS背景漸層顏色語法

今天為了css的漸層背景在忙了好久，google一下後發現Ultimate CSS Gradient Generator - ColorZilla.com這個網站可以很直覺化的產生各種瀏覽器css碼，這讓我省了不少時間，跟大分享。