Блог

Я добавил несколько стилей в файл global.scss, который я хотел бы использовать на разных страницах. один из них:

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

Я планирую расширить эти стили в pages.scss. Я хотел бы знать, есть ли лучший способ повторного использования стилей в ionic. Если кто-нибудь знает, пожалуйста, поделитесь своими знаниями. Спасибо

Вы можете добавлять и использовать цвета следующими способами:

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 в файл scss компонента / страницы, например :

1. В глобальном файле.scss объявите любую переменную:

    $labelfontsize: 12px;
     

2. Импортируйте файл global.scss в файл scss компонента / страницы, а затем используйте переменную:

В зависимости от структуры вашего проекта

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

Ну, я использую этот способ:

global.scss например, я объявляю переменную Sass:

 $primary-color: #005bbb;
  

Затем вам нужно импортировать таблицу стилей, в которой можно найти переменную (global.scss).

в home.scss

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

дайте мне знать, если это было полезно для вас.