如何覆盖离子sass变量？-Java 学习之路

在阅读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;

这是我的app界面：

enter image description here

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

enter image description here

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

当我禁用 background:white 颜色变成了 rnbBlue ,,,我知道我可以通过 .item-md{...} 覆盖这个类，但我不是最好的做法't need this method,, because doesn'

注意：我使用的是“离子角”：“3.6.0”，“离子原生”：“^ 2.9.0”，

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

谢谢 .

1 回答

1
你明显误解了 $item-xx-sliding-content-background 变量 . 那个's not for the item background color per se, it'用于滑动 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>
```
grab 项目并将其拖到左侧，你'll see that the background'将是 $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 文件并覆盖那里 .

只记得它的'll up to you to organize your app CSS code, if you want to stick to variabes that'很好，但在某个地方它也很好 . 如果你害怕得到一个混乱的代码尝试使用BEM，它's easy and you'将有一个良好和有组织的代码 .

希望这可以帮助 .
回复于 2024-04-19T17:04:00+08:00

如何覆盖离子sass变量？

1 回答

相关问题