How to call Ionic sass variables in Page's scss?

Ionic Framework ionic-v3
1

Using: 2.0.0-beta.11

I’m trying to make a custom variable using some of ionic’s iOS sass Variables right after importing ionic.ios

app/theme/app.ios.scss
@import "ionic.ios"; $tab-space : $toolbar-ios-height + $tabs-ios-tab-min-height;

Since app.ios.scss also imports app.core (where I can import my Page classes), I thought I could call the $tab-space variable in my Login Page’s scss like so:

app/pages/login/login.scss
ion-tabs ion-tab ion-page.show-page ion-content scroll-content { margin-top: $tab-space ; }

But I keep getting a “undefined variable: $tab-space” error upon build, yet the page loads as if $tab-space’s variable was applied.

I’m sure i’m missing something, but I’ve been at this for a while and can’t find out why.

image

1 Like
2

You cannot use the ionic sass variables inside the pages.

3

Don’t you think it is worth implementing it – or at least mentioning a recommended way of importing the variables?