Search code examples
ionic-frameworkionic4

Difference between Angular property and Custom CSS Properties in Ionic

Could you give an example of usage of CSS Custom Properties

--ion-grid-padding
--ion-grid-padding-lg

with Angular.

Specifically, I do not see a thin difference between size-sm and --ion-grid-padding-lg?

I do not understand where and in what file I should use custom CSS properties (also, how to use them properly).

Solution

  • You can define your custom css properties in the file variable.css, for example:

    --my-custom-opacity: 0.8;

    In the css file associated with your page, or in global.css, you can access this property using:

    .my-css-class {
   opacity: var(--my-custom-opacity);
}

    Your html elements will be attributed an opacity of 0.8.

    If you need to update this property to change on a single page (and stay the same elsewhere), you can update it using the host tag:

    :host {
   --my-custom-opacity: 0.6;
}

    In that case, your elements will be attributed an opacity of 0.6 on this page only.

    This is an easy way to apply css values at multiple places in your code and update when necessary.

    Hope that helps!