[Day 17] Sass - Parent Selector

&
父选择器“&”通常与Sass的Nesting用法搭配使用，
当内层的选择器使用"&"时，它会替换为外层的选择器。
举个简单的例子

.title {
  &.editing {
      font-weight: bold
  }
}

css为

.title .editing {
    font-weight: bold
}

“&” 还可以更灵活的运用於：

.alert {
  // 帮外层选择器添加伪类(如hover、focus等等)
  &:hover {
    font-weight: bold;
  }

  // 也可以用来代替外层的字串
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  // 甚至把它用来代替伪类的参数
  :not(&) {
    opacity: 0.8;
  }
}

编译出的css为

.alert:hover {
  font-weight: bold;
}
[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}

有时候，会遇到一些比较长的名称
(像是.accordion、.accordion__copy、.accordion__copy--open)，
也可以用"&"来帮忙～
假如我们想得到这样的css：

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;
}
.accordion__copy {
  display: none;
  padding: 1rem 1.5rem 2rem 1.5rem;
  color: gray;
  line-height: 1.6;
  font-size: 14px;
  font-weight: 500;
}
.accordion__copy--open {
  display: block;
}

就可以用这样的Scss来表示：

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;

  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;
    color: gray;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;

    &--open {
      display: block;
    }
  }
}

参考资料：
https://sass-lang.com/documentation/style-rules/parent-selector