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 仍然可以做到一些基本巢状结构无法做到的混合效果，透过这篇教学应该就更能掌握相关语法。

意见反馈