[Sass]嵌套-偽類嵌套

其實偽類嵌套和屬性嵌套非常類似,只不過他需要藉助`&`符號一起配合使用。我們就拿經典的“clearfix”為例吧:

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

編譯出來的CSS:

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

避免選擇器嵌套:

  • 選擇器嵌套最大的問題是將使最終的代碼難以閱讀。 開發者需要花費巨大精力計算不同縮進級別下的選擇器具體的表現效果。
  • 選擇器越具體則聲明語句越冗長,而且對最近選擇器的引用(&)也越頻繁。 在某些時候,出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高,這非常不值得。

為了防止此類情況,我們應該盡可能避免選擇器嵌套。然而,顯然只有少數情況適應這一措施。

results matching ""

    No results matching ""