嵌套規(guī)則

Sass允許將一套 CSS 樣式嵌套進(jìn)另一套樣式中，內(nèi)層的樣式將它外層的選擇器作為父選擇器，例如：
css樣式：

.container {
  width: 600px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container > div.wrapper {
  width: 300px;
  height: 300px;
  background-color: #f00;
}

sass樣式：

.container {
  width: 600px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  div.wrapper {
    width: 300px;
    height: 300px;
    background-color: #f00;
  }
}

嵌套規(guī)則避免了重復(fù)輸入父選擇器，而且令復(fù)雜的 CSS 結(jié)構(gòu)更加易于管理。

父選擇器 &

在嵌套CSS規(guī)則時(shí)，有時(shí)候需要對(duì)于父元素的直屬元素或者對(duì)于父元素進(jìn)行偽類和偽元素的操作，這時(shí)候父元素就可以直接使用&來(lái)代替，如果樣式中含有多層嵌套，最外層的父選擇器會(huì)一層一層向下傳遞，例如上面的例子，就可以變?yōu)椋?/p>

.container {
  width: 600px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    cursor: pointer;
  }
  & > div.wrapper {
    width: 300px;
    height: 300px;
    background-color: #f00;
  }
}

屬性嵌套

對(duì)于某些擁有相同命名空間的 CSS 屬性來(lái)說(shuō)，為了便于管理和重復(fù)輸入，Sass允許將屬性嵌套在命名空間中。例如：

.example {
  font: {
    family: 'Microsoft YaHei';
    size: 16px;
    weight: bold;
  }
}

注釋 /* */ 與 //

Sass 支持標(biāo)準(zhǔn)的 CSS /* */注釋和 //注釋， /* */可以被完整地輸出到編譯后的CSS文件中， //不會(huì)。