将 CSS 规则应用于父选择器和更具体的选择器，而不重复该行答案

【问题标题】：Apply a CSS rule to the parent selector and a more specific selector without repeating the line将 CSS 规则应用于父选择器和更具体的选择器，而不重复该行
【发布时间】：2017-10-31 01:22:39
【问题描述】：

我正在使用 Ionic 开发一个项目，这是我第一次使用 SCSS。尽管我有些困惑，但我已经理解了很多概念，下面的代码将帮助您理解它。

该组件是 ion-item 组件，由于某种原因，border-radius 不能直接在 iOS 游戏表单中工作，除非我们使用 !important，在 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-subscription-list ion-item.item-ios

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

我正在阅读：https://css-tricks.com/the-sass-ampersand/，但它似乎对我的问题没有帮助，可能我看错了方式？

谢谢！

【问题讨论】：

ion-item 已经被选中，border-radius 将被应用到它上面，为什么你需要在ion-item.item-ios 上再次显式应用它？
因为在 iOS 平台中加载应用程序时，border-radius 会被 CSS 类覆盖，该 CSS 类是 iOS 平台特定的 Ionic 框架的一部分，对于 Android 和 Windows，border-radius通过简单地使用ion-item 来覆盖iOS 平台的样式我需要使用!important 或更具体的选择器，如ion-item.item-ios

标签： css sass ionic2

【解决方案1】：

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

所以我决定这样做。

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

从 Ionic 框架的角度来看，我可以这样做：

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

因为ion-item 还包含item 类以及平台特定类，例如item-md 和item-ios。

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

【讨论】：