CODEWITHSUNDEEP
iosangularionic-frameworksass
Ben5
Ben5

Reputation: 881

Use existing ionic Sass variables

With Ionic 5, how can we use existing Sass Variables for our own css classes? The variables I mean are described here: https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/

I'd like to to something like this in global.scss:

.card-margin {
    margin-left: $card-md-margin-left;
    margin-right: $card-md-margin-right;
}

Unfortunately I cannot find where these variables are stored.

Upvotes: 0

Views: 1115

Answers (1)

Alexis Deprez
Alexis Deprez

Reputation: 575

Ionic 4+ use CSS variables, so you can get it with the var(variable, default?) function.

e.g. for a background color, as defined in variables.scss :

background: var(--ion-color-light, #fff);

In Ionic 4+ there is no mention of a possible usage of the v3 sass variables. They are not available in the @angular/ionic module, we only have access to the final css.

You can still get them from the sources : https://github.com/ionic-team/ionic-framework/tree/main/core/src/themes and import them, but it seems a bit hacky.

Upvotes: 1

Related Questions