sass & 疑问

Question

问题：在看bootstrap的sass文件，碰到这种情况，单独拿出来编译下没看懂。

sass

div {
  fieldset[disabled] & {
    &:hover {
      color: red;
    }
  }
}

css

fieldset[disabled] div:hover {
  color: red; }

css文件中 fieldset外层的div为什么没有了呢？ 请教下~

Answer 1

div 被第二行的 & 取代了， & 在 SASS 中表示全部的上级元素， 如

.a {
  .b {
    .c & {
      color: red;
    }
  }
}

编译出来的结果就会是

.c .a .b {
  color: red;
}