css - 将 CSS 规则应用于父选择器和更具体的选择器，而无需重复该行

Question

我正在用 Ionic 做一个元素，这是我第一次使用 SCSS。虽然我有点困惑，但我已经理解了很多概念，下面的代码将帮助您理解它。

该组件是 ion-item 组件，出于某种原因，除非我们使用 ，否则 border-radius 不能直接在 iOS playform 中工作!重要，在 Android 和 Windows 平台上工作正常，以补救我目前拥有的

page-subscription-list {
    & ion-item {
        background-color: color($colors, light, base);
        border-radius: 10px;
        &.item-ios {
            border-radius: 10px;
        }
    }
}

我不想使用 !important 因为众所周知它会使工作流程变得困难，我知道在这里使用它并不重要但我打算完全远离它。

如您所见，border-radius: 10px; 目前出现了两次，一次用于 page-subscription-list ion-item ，然后一次用于 page -订阅列表 ion-item.item-ios

我的问题是 SASS 中是否有任何类型的函数可以让我们对特定选择器 ion-item.item-ios 和父选择器本身使用同一行 CSS 规则即 ion-item

我正在读这个:https://css-tricks.com/the-sass-ampersand/ ，但它似乎并没有帮助我解决我的问题，可能是我看错了方向？

谢谢!

Answer 1

我发现即使有任何函数可以让我们做到这一点，它最终总会有两个用逗号分隔的选择器，没有自动的方法来减少将要生成的代码行。

所以我决定继续这样做。

& ion-item,
& ion-item.item-ios {
    background-color: color($colors, light, base);
    border-radius: 10px;

从 Ionic 框架的 Angular 来看，我可以这样做:

& ion-item {
    &.item {
        background-color: color($colors, light, base);
        border-radius: 10px;
    }
}

因为 ion-item 也有 item 类以及平台特定类，如 item-md 和 item -ios。

如果您有任何建议，请发表评论或回答这个问题! :)