# Override a SASS Variable in the page scss **URL:** \ **Category:** ionic-v3\ **Created:** [November 8, 2017, 3:20am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367 "2017-11-08T03:20:15Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Ben1nB1ack](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ben1nb1ack/32/114904_2.png) [@Ben1nB1ack](https://forum.ionicframework.com/u/Ben1nB1ack)\ **Post date:** [November 8, 2017, 3:20am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/1 "2017-11-08T03:20:15Z")
No, I don’t want it to apply the whole app. so lets say I want to override Sass var for ion-Item ```auto $item-ios-paragraph-font-size ``` for the page im on. Please don’t give me the color example ---
**Author:** ![SigmundFroyd](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sigmundfroyd/32/111604_2.png) [@SigmundFroyd](https://forum.ionicframework.com/u/SigmundFroyd)\ **Post date:** [November 8, 2017, 3:30am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/2 "2017-11-08T03:30:16Z")
Just go with some old school CSS. ```auto .my-page { p { font-size: 128px; } } ``` ---
**Author:** ![Ben1nB1ack](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ben1nb1ack/32/114904_2.png) [@Ben1nB1ack](https://forum.ionicframework.com/u/Ben1nB1ack)\ **Post date:** [November 8, 2017, 3:34am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/3 "2017-11-08T03:34:45Z")
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 😉 yes, I know i can put them in variables.scss, but that applies to the all pages. ---
**Author:** ![SigmundFroyd](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sigmundfroyd/32/111604_2.png) [@SigmundFroyd](https://forum.ionicframework.com/u/SigmundFroyd)\ **Post date:** [November 8, 2017, 4:02am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/4 "2017-11-08T04:02:00Z")
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. ---
**Author:** ![Ben1nB1ack](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ben1nb1ack/32/114904_2.png) [@Ben1nB1ack](https://forum.ionicframework.com/u/Ben1nB1ack)\ **Post date:** [November 8, 2017, 5:04am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/5 "2017-11-08T05:04:56Z")
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 ```auto 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 ```auto page-home { $sassvar: value; } ``` ---
**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\ **Post date:** [November 8, 2017, 5:30am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/6 "2017-11-08T05:30:38Z")
Why not using css classes for specific cases? [https://www.w3schools.com/cssref/sel\_class.asp](https://www.w3schools.com/cssref/sel_class.asp) ---
**Author:** ![Ben1nB1ack](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ben1nb1ack/32/114904_2.png) [@Ben1nB1ack](https://forum.ionicframework.com/u/Ben1nB1ack)\ **Post date:** [November 8, 2017, 5:40am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/7 "2017-11-08T05:40:29Z")
thanks for reply Tom, This started out more as trying to learn how to use those darn $var, 🙂 I didn’t try adding class attribute i did try ```auto 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. ---
**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\ **Post date:** [November 8, 2017, 6:14am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/8 "2017-11-08T06:14:32Z")
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 ---
**Author:** ![Ben1nB1ack](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ben1nb1ack/32/114904_2.png) [@Ben1nB1ack](https://forum.ionicframework.com/u/Ben1nB1ack)\ **Post date:** [November 8, 2017, 6:23am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/9 "2017-11-08T06:23:28Z")
At the rate they are coming out with new versions, it would be hard pressed for them to keep it all documented 😉 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. ---
**Author:** ![carlofontanos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/carlofontanos/32/122362_2.png) [@carlofontanos](https://forum.ionicframework.com/u/carlofontanos)\ **Post date:** [October 24, 2018, 8:43am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/10 "2018-10-24T08:43:48Z")
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: ```auto 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: ```auto page-mailbox { img { width: 100px !important; height: 100px !important;} } ``` But eeeww, that looks ugly. ---
**Author:** ![chiemeka](https://avatars.discourse-cdn.com/v4/letter/c/e9bcb4/32.png) [@chiemeka](https://forum.ionicframework.com/u/chiemeka)\ **Post date:** [October 25, 2018, 11:54am UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/11 "2018-10-25T11:54:36Z")
@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 `` 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. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [July 19, 2021, 10:06pm UTC](https://forum.ionicframework.com/t/override-a-sass-variable-in-the-page-scss/111367/12 "2021-07-19T22:06:22Z")
Closed on July 19, 2021, 10:06pm UTC