Less – 父选择器

使用&引用父选择器。

&操作符表示当前的父选择器，通常在嵌套样式中使用:

less代码：

a {
  color: blue;
  &:hover {
    color: green;
  }
}

css输出：

a {
  color: blue;
}

a:hover {
  color: green;
}

注意，如果没有&，根据嵌套样式规则，上面的例子会产生一个a :hover规则(中间有空格)。

“父选择器”操作符有多种用途。例如，&的另一个典型用法是生成部分重复的类名:

less代码：

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

css输出：

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

多重&

&可能在选择器中出现多次。这使得重复引用父选择器而不重复其名称成为可能。

less代码：

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

css输出：

.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

注意&表示所有父选择器(不只是最近的祖先)，所以下面的例子:

less代码：

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

css输出：

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}

改变选择器顺序

将选择器前置到继承的(父)选择器可能很有用，这可以通过把&放到当前选择器后面来实现。例如，在使用Modernizr时，你可能希望根据所支持的特性指定不同的规则:

less代码：

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}

css输出：

.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}

组合爆炸

父选择器是一个逗号分隔的列表，& + &可用于生成父选择器中各个元素的排列组合:

less代码：

p, a, ul, li {
  border-top: 2px dotted #366;
  & + & {
    border-top: 0;
  }
}

css输出：

p,
a,
ul,
li {
  border-top: 2px dotted #366;
}
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 {
  border-top: 0;
}