Sass 嵌套

嵌套規則

Sass 容許咱們將以與html相同的方式嵌套css選擇器，將一套 CSS 樣式嵌套進另外一套樣式中，內層的樣式將它外層的選擇器做爲父選擇器，好比：

// .scss語法
    #main {
      width: 97%;
      p, div {
        font-size: 2em;
        a { 
        	font-weight: bold; 
        }
      }
      pre { 
      	font-size: 3em; 
      }
    }
    
    // 編譯爲.css
    #main {
    	width: 97%; 
    }
    #main p, #main div {
        font-size: 2em; 
    }
    #main p a, #main div a {
    	font-weight: bold; 
    }
    #main pre {
    	font-size: 3em; 
    }

嵌套功能避免了重複輸入父選擇器，並且也使得複雜的 CSS 結構更加便於管理。

注意：在Sass中，ul、li和a選擇器嵌套是在nav選擇器中的，在css中，規則時逐個定義的（不是嵌套的）。

父選擇器 &

在嵌套 CSS 規則時，有時候咱們須要直接使用到嵌套外層的父選擇器，好比，當給某一個元素設定 hover 樣式時或者是當 body 元素有個 classname 時，能夠用 & 表明嵌套規則外層的父選擇器。

嵌套屬性

許多CSS屬性具備相同的前綴 ，好比 font-family，font-size，font-weight ，text-align，text-transform，text-overflow 前三者和後三者分別是以 font 和 text 做爲屬性的命名空間，爲了便於管理這樣的屬性，同時也爲了不重複輸入，Sass 容許將屬性嵌套在命名空間中。

// .scss 語法
    font: {
      family: Helvetica, sans-serif;
      size: 24px;
      weight: bold;
    }
    text: {
      align: center;
      transform: lowercase;
      overflow: hidden;
    }
    
    // 編譯後的普通css
    font-family: Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    
    text-align: center;
    text-transform: lowercase;
    text-overflow: hidden;

佔位符選擇器 %foo

Sass 額外提供了一種特殊類型的選擇器：佔位符選擇器 (placeholder selector)，它與經常使用的 id 與 class 選擇器寫法類似，只是 # 或 . 替換成了 %，必須經過 @extend 指令調用。