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

7z5jn7bk 于 2022-12-08 发布在 Ionic

关注(0)|答案(1)|浏览(115)

我不明白在某些页面的scss中使用“&”，也不明白scss。

某页.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
            }

}

ionic-framework

来源：https://stackoverflow.com/questions/49568727/what-is-the-use-of-in-scss-of-some-page

1条答案

按热度按时间

wz3gfoph1#

在Sass中，&（与号）引用代码块的父级（或父级链）。
鉴于此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;
}

赞(0）回复(0）举报 2022-12-08

我来回答

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

1条答案

相关问题

热门标签

最新问答