某些页面的 &在 scss 中有什么用

Question

我不了解使用'＆amp;'的使用在某些页面的SCS和我尚不理解的SCS中。

some-page.scss

some-page-selector {
    & ion-item {
        &.item {
            //some properties
            &[margin-bottom] {
                //some property
            }
            & ion-avatar {
                //some property
            }
            & ion-avatar ion-img,
            & ion-avatar img {
               //some property
            }
}

Answer 1

在sass中， &(ampersand(引用了代码块的父(或父母链(。

给定此SCSS(类似于您发布的内容(...

page {
  & ion-item {               // => page ion-item
    &.item {                 // => page ion-item.item
      color: red;
      &[margin-bottom] {     // => page ion-item.item[margin-bottom]
        margin-bottom: 1em;
      }
      & ion-avatar {         // => page ion-item.item ion-avatar
        font-weight: bold;
      }
    }
  }
}

...您将获得此编译的CSS：

page ion-item.item {
  color: red;
}
page ion-item.item[margin-bottom] {
  margin-bottom: 1em;
}
page ion-item.item ion-avatar {
  font-weight: bold;
}