Question

我正在研究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/，但它似乎没有帮助我解决我的问题，可能我看错了方法？

谢谢！

Answer 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等特定于平台的类。

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

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

1 个答案: