如何覆盖离子sass变量？

Question

在阅读ionic2文档后，我们可以覆盖scss变量并通过覆盖variables.scss文件中的scss变量来更改ionic2组件的样式和颜色。

我需要更改ionic2滑动项目的背景颜色。 阅读页面ionic2 theming 后，我可以通过更改这两个变量的颜色来更改背景

$item-wp-sliding-content-background & $item-ios-sliding-content-background

这是我的代码：

$item-md-sliding-content-background: color($colors, rnbBlue);
$item-ios-sliding-content-background: color($colors,rnbBlue);

  

$ rnbBlue：＃1b5b94;

这是我的应用界面：

最后一个代码是可行的，因为我看到了背景颜色变为rnbBlue的inspect元素：

但滑动物品仍然是白色的......我在检查中看到.item-md有background:white：

当我禁用background:white颜色变为rnbBlue时，我知道我可以通过.item-md{...}覆盖此类，但我不需要这种方法，因为我不需要＃39;最佳实践

  

注意：我使用＆＃34; ionic-angular＆＃34;：＆＃34; 3.6.0＆＃34;，           ＆＃34;离子原生＆＃34;：＆＃34; ^ 2.9.0＆＃34;，

现在我的问题是： 为什么覆盖方法不能正常工作？！

感谢。

Answer 1

你明显误解了ion-item-sliding变量。这不是项目背景颜色本身，而是当您滑动<ion-item-sliding #item> <ion-item> Item </ion-item> <ion-item-options side="right"> <button ion-button (click)="unread(item)">Unread</button> </ion-item-options> </ion-item-sliding> 时可以显示可滑动内容的背景。

所以试试这段代码

$rnbBlue

抓住该项目并将其拖到左侧，您将看到背景为.scss颜色。

wp只有背景颜色，你可以找到所有SASS变量here。

但是说你不想通过SCSS文件覆盖CSS，因为最好的做法并不是错误的。当然通过SASS更新它很好，它组织起来很容易找到，但如果它是唯一正确的方法，我们将为每个组件的所有可能的CSS属性提供变量。

您可以覆盖SCSS文件中的CSS，只需要以最佳方式编写它。

您是否只想覆盖该页面的项目背景颜色？转到该组件my-component-tag { .item { /* This'll override the item for all platforms, if you want just for ios you can try .item-ios*/ background-color: #1b5b94; } } 文件并执行

src/app/app.scss

您要为所有应用覆盖它吗？所以转到 this.socket = io('ws://localhost:8080', { transports: ['websocket'] }) 文件并覆盖那里。

请记住，如果你想坚持那些很好的变种，你可以自己组织你的应用程序CSS代码，但在某些地方，你需要使用一些CSS，这也很好。如果您害怕使用BEM来获取混乱的代码，那么这很容易，并且您将拥有一个良好且有条理的代码。

希望这有帮助。