less 使用特性 - &

实例一

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

output:

a {
  color: blue;
}

a:hover {
  color: green;
}

实例二

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

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

output:

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

实例三

.link {
& + & {

color: red;

}

& & {

color: green;

}

&& {

color: blue;

}

&, &ish {

color: cyan;

}
}

output:

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