Less 教學：巢狀結構、選擇器

這篇 Less 教學會說明 Less 最基本的巢狀結構語法，並介紹 Less 對於 CSS 選擇器所設計的特殊符號「&」，透過巢狀結構和選擇器的互相搭配，就能將複雜的 CSS 簡化，寫出漂亮的語法結構。

快速導覽：

• Less 巢狀結構語法
• Less 選擇器的特殊符號「&」
  • 使用 & 處理重複名稱
  • 使用 & 的注意事項

Less 巢狀結構語法

開始使用 Less 時通常會被其「巢狀結構語法」所吸引 ( 因為早期 CSS 並沒有這種結構語法 )，巢狀結構語法是使用大括號「{}」包覆大括號「{}」的方式，產生一層一層嵌套的結構，CSS 的巢狀結構雖然沒有特別要求「縮排」，但通常每一層會使用「兩個空白」作為縮排，使用巢狀結構後，可以大幅縮減 CSS 結構選擇器的「重複語法」，下方範例會展示 Less 的巢狀結構語法以及轉換成 CSS 的長相。

/********** Less 寫法 **********/
div {
  color: gray;
  h2 {color: red;}
  nav {
    color: black;
    h2 {
      color: blue;
    }
  }
}


/********** 轉換成 CSS **********/
div {color: gray;}
div h2 {color: red;}
div nav {color: black;}
div nav h2{color: blue;}

Less 選擇器的特殊符號「&」

撰寫 CSS 有時會運用一些「特殊符號」，例如 +、,、> 等，這些特殊符號會多重選取選擇器，或將選擇器組合成新的選擇器，而 Less 除了支援這些原生的 CSS 特殊符號，還額外提供了 & 特殊符號，可以大幅簡化複雜的 CSS 結構，這個特殊符號 & 等同巢狀結構的父層選擇器，除了可以單獨使用，也可以多個 & 互相組合，通常應用於虛擬類別或虛擬元素。

/********** Less 寫法 **********/
.a {
  color: blue;
  &:hover {
    color: red;
  }
  && {
    color: blue;
  }
}


/********** 轉換成 CSS **********/
.a {
  color: blue;
}
.a:hover {
  color: red;
}
.a.a {
  color: blue;
}

使用 & 處理重複名稱

如果有「名稱部分重複」的選擇器，可以利用 & 快速設定這些選擇器，節省重複輸入文字的時間。

/********** Less 寫法 **********/
.oxxo {
  &-01 {
    color: red;
  }
  &-02 {
    color: orange;
  }
  &-03 {
    color: blue;
  }
}


/********** 轉換成 CSS **********/
.oxxo-01 {
  color: red;
}
.oxxo-02 {
  color: orange;
}
.oxxo-03 {
  color: blue;
}

使用 & 的注意事項

由於 & 會取得「所有的」父層選擇器，如果巢狀結構有多層的父層選擇器，就會一起被套用。

/********** Less 寫法 **********/
.a {
  .b {
    & > span {
      color: yellow;
    }
  }
}


/********** 轉換成 CSS **********/
.a .b > span {
  color: yellow;
}

使用 & 需要特別注意，若父層選擇器太多，最後可能會轉換成冗長又多餘的 CSS，例如下方範例在轉換後，會產生一大串的選擇器，這種類型的選擇器會有一定程度影響 CSS 效能。

/********** Less 寫法 **********/
.p, .a, .ul, .li {
  color: blue;
  & + & {
    color: red;
  }
}


/********** 轉換成 CSS **********/
.p, .a, .ul, .li {
  color: blue;
}
.p + .p, .p + .a, .p + .ul, .p + .li,
.a + .p, .a + .a, .a + .ul, .a + .li,
.ul + .p, .ul + .a, .ul + .ul, .ul + .li,
.li + .p, .li + .a, .li + .ul, .li + .li {
  color: red;
}

小結

雖然目前大部分的瀏覽器都已經支援原生 CSS 巢狀結構，但 Less 仍然可以做到一些基本巢狀結構無法做到的混合效果，透過這篇教學應該就更能掌握相關語法。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～