What is the best way to reuse styles in ionic?

Question

I have added some styles in global.scss file which I would like to use in different pages. one of them is:

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

My plan is I will extends these styles in pages.scss. I would like to know is there any better way to reuse styles in ionic. If anyone knows then please share your knowledge. Thanks

Answer 1

You can add and use colors in following ways:

1. First add the new color in :root in variables.scss, e.g:

   /** 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. Add then you can use it in .scss file, e.g:

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

For font size or other stuffs, you can add variables in global.scss and then use them by importing global.scss file in to scss file of component/page, such as :

1. In global.scss file declare any variable:

   $labelfontsize: 12px;
   

2. Import global.scss file in to scss file of component/page and then use the variable:

Depending on your project structure

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