在 ionic 中重用样式的最佳方法是什么？

Question

我在 global.scss 文件中添加了一些样式，我想在不同的页面中使用这些样式。其中之一是：

.primary-blue-color {
  --ion-background-color: #005bbb;
}
.primary-red-color {
  --ion-background-color: red;
}

我的计划是在 pages.scss 中扩展这些样式。我想知道有没有更好的方法来重用 ionic 中的样式。如果有人知道，请分享您的知识。谢谢

Answer 1

嗯，我是这样用的：

在 global.scss 我声明了 Sass 变量，例如：

$primary-color: #005bbb;

然后您需要导入可以找到变量的样式表(global.scss)。

在home.scss

@import "../../global.scss";
.title{
    color: $primary-color;
}

如果这对你有用，请告诉我。

Answer 2

您可以通过以下方式添加和使用颜色：

1. 首先在:root中添加新的颜色在variables.scss中，例如：

   /** primary green gradient **/
   --ion-color-primary-green-gradient: rgba(80, 158, 47, 0.9);
   --ion-color-primary-green-gradient-rgb: rgba(80, 158, 47, 0.9);
   --ion-color-primary-green-gradient-contrast: 0, 0, 0;
   --ion-color-primary-green-gradient-contrast-rgb: 0, 0, 0;
   --ion-color-primary-green-gradient-shade: 0, 0, 0;
   --ion-color-primary-green-gradient-tint: 0, 0, 0;
   

2. 添加然后就可以在.scss文件中使用了，例如：

   .view {
       --ion-background-color: var(--ion-color-primary-green-gradient);
   }
   

字体大小之类的，你可以在global.scss中添加变量，然后通过导入global.scss[=来使用它们41=]文件到component/page的scss文件中，如：

1. 在global.scss文件中声明任意变量：

   $labelfontsize: 12px;
   

2. 将global.scss文件导入到component/page的scss文件中，然后使用变量：

取决于您的项目结构

  @import "../../../global.scss";
   //or
                
  @import ".../../global.scss";
                
  .label {
      font-size: $labelfontsize;
  }