css - 如何覆盖 ionic sass 变量？

Question

阅读ionic2文档后，我们可以通过覆盖variables.scss文件中的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 的检查元素:

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

当我禁用 background:white 时，颜色变为 rnbBlue,,, 我知道我可以通过 .item-md{... 但我不需要这种方法，因为这不是最佳实践

NOTE: I'm using "ionic-angular": "3.6.0", "ionic-native": "^2.9.0",

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

谢谢。

Answer 1

您显然误解了 $item-xx-sliding-content-background 变量。这不是元素背景颜色本身，而是当您滑动 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 颜色。

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

但是说您不想通过 SCSS 文件覆盖 CSS 因为这不是最佳实践是错误的。当然，通过 SASS 更新它很好，它井然有序且易于查找，但如果这是唯一正确的方法，我们将为每个组件的所有可能的 CSS 属性设置变量。

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

您是否只想覆盖该页面的元素背景颜色？转到该组件 .scss 文件并执行

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 文件并在那里覆盖。

请记住，组织您的应用程序 CSS 代码取决于您，如果您想坚持使用变量，那很好，但在某些地方需要使用一些 CSS，这也很好。如果您害怕得到乱码，请尝试使用 BEM ，这很容易，您将拥有一个良好且有组织的代码。

希望这对您有所帮助。