Override a SASS Variable in the page scss

Ionic Framework ionic-v3
1

No, I don’t want it to apply the whole app.

so lets say I want to override Sass var for ion-Item

$item-ios-paragraph-font-size

for the page im on.

Please don’t give me the color example

1 Like
2

Just go with some old school CSS.

.my-page {
  p {
    font-size: 128px;
  }
}
3

yeah, appreciate the reply.

I’m kinda want to figure out how to use them, I mean they took the time to create them and put them in the docs
:wink:

yes, I know i can put them in variables.scss, but that applies to the all pages.

4

The thing with the variables is that they’re system wide, so it’s best to think of them as your “theme’s” defaults. Put another way, there’s no way to have per page variable setting (just based on the way SASS and the compiler works).

Which is why I suggested the “old school” CSS way. That’s the way to go when you want to deviate from your established norm.

5

hey, Sig, I again appreciate the reply.

I think i found the key to wrangling how to work with ionic components in scss

you have to basically enumerate all the parent items

page-home {
  ion-content {
    ion-grid {
      ion-row {
        ion-col {
          img {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto;
            margin-right: auto;
            display: block
          }

        }
      }
    }
  }
}

I had tried a bunch of different ways suggested. but this one worked,

oh, sorry this thread was for doing sass variables.

I wonder if I could do this in variables.scss

page-home {
  $sassvar: value;
}
1 Like
6

Why not using css classes for specific cases?

https://www.w3schools.com/cssref/sel_class.asp

7

thanks for reply Tom,

This started out more as trying to learn how to use those darn $var, :slight_smile:

I didn’t try adding class attribute

i did try

page-home {
 img {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto;
            margin-right: auto;
            display: block
          }
}

all my attempts to do directly would not center the image. Next time I will try class.
just frustrated that they put those nice $vars in the docs and no docs on how to access them from page.scss or
how to use them.

8

HI

There are two things about ionic

It brings a great collection of standards and technologies together, for which much expertise is available through the web

Ionic creates an extremely low barrier for people to start working on apps

Having said this, I believe it is not fully fair to expect ionic team to create all inclusive documentation

For me, it did take me a bit of edfort to grasp how sass works, and ionic docs on theming did help but not fully

Happy coding

Tom

9

At the rate they are coming out with new versions, it would be hard pressed for them to keep it all documented :wink:

It is a great platform,

the thing is without even a hint of how to implement in docs, spawns questions in forums and support.
my frustration was more aimed at that. i search for several days to find a solution that stayed within their framework
and not just use class which i know how to use.

1 Like
10

I feel bad that nobody here seem to understand Ben1nB1ack’s issue. I too am trying to figure out how to make this simple code work in my page’s scss:

page-mailbox {
	$item-md-avatar-size: 100px;
}

instead of placing it in the variables.scss which applies it to the entire app rather than in the page only. So why doesn’t this work?

I found out that using important works:

page-mailbox {
	img { width: 100px !important; height: 100px !important;}
}

But eeeww, that looks ugly.

11

@Ben1nB1ack,
I truly sympathise with you. And then I went into trying to find a way as i needed it myself.
I found something:
Apply [style.font-family]="fontVariable" to the <ion-nav> tag in app.html, and change the class variable fontVariable in the app.component.ts file each time a new page is loaded, to apply the new font.

You can give the fontVariable variable a default font-family name in the app.component.ts file, and change it whenever needed (maybe based on user choice) using the ionic-angular's events.publish().

To programmatically apply new fonts to entire app, just add the [style.font-family]="fontVariable" to all applicable tags within app.html alone. And…

Finally (alternative), nothing stops you from creating a class eg. variableFont in app.scss as follows .variableFont{ font-family: 'Brush Script Std'; } and then adding the class to any page’s element/tag you desire. It worked for me.
Note. I am using the left hand menu (called sidemenu) configuration, you might need to adjust to fit the tab configuration.

1 Like