巢狀結構 Nesting

使用 & 符號來引用父選擇器。(需注意縮排寫法)

在另一個規則中宣告新規則時，它就稱為巢狀。
一般CSS需要重複寫許多父元素選擇器，才能寫出巢狀的階層結構，降低整體可讀性、樣式設定的彈性。
但在SASS裡的巢狀結構，可以清楚的知道元素上下層的關聯性，降低父元素重複性，大幅減少編寫重複的開頭，加速程式開發的時間。

！！！須注意Nesting 不宜過於肥厚，如果太多層，選擇器階層性過長，會導致瀏覽器渲染時間會比較久。！！！

// scss //　／／像父子元素一樣層層包住。／／
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

　編｜
　譯｜　　
　後｜
　　Ｖ

// CSS //　　／／需要寫許多 nav 父元素／／
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

常用的屬性：
font -> font-family、font-size、font-weight。
backgroud -> background-color、background-position、background-size、background-image。

例如:

// scss //

.main {
  font: {
      family: Arial,serif,sans-serif;
      size: 100px;
      weight: normal;
  }
}

　編｜
　譯｜　　
　後｜
　　Ｖ

// CSS //

.main {
  font-family: Arial, serif, sans-serif;
  font-size: 100px;
  font-weight: normal;
}

在嵌套狀態下，想取得外層的父選擇器，可使用& 符號。
用於 CSS 元件狀態：:hover、:focus、:before、:after 、:link、:visited。

例如:

// scss //

#main {
  display: block;
  a {
      color: #5b90d0;
      &:hover, &:active, &:focus {
          color: #a00606;
          outline: none;
          text-decoration: none !important;
      }
  }
}

　編｜
　譯｜　　
　後｜
　　Ｖ

// CSS //

#main {
  display: block;
}
#main a {
  color: #5b90d0;
}
#main a:hover, #main a:active, #main a:focus {
  color: #a00606;
  outline: none;
  text-decoration: none !important;
}