# Overriding Ionic Sass in Ionic v4

**URL:** <https://forum.ionicframework.com/t/overriding-ionic-sass-in-ionic-v4/135297>\
**Category:** Ionic Framework\
**Created:** [July 14, 2018, 6:11pm UTC](https://forum.ionicframework.com/t/overriding-ionic-sass-in-ionic-v4/135297 "2018-07-14T18:11:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [July 14, 2018, 6:11pm UTC](https://forum.ionicframework.com/t/overriding-ionic-sass-in-ionic-v4/135297/1 "2018-07-14T18:11:46Z")

</div>

Is it still possible to override Ionic Sass variables in Ionic v4? I found nothing in the documentation…

I mean these [https://ionicframework.com/docs/theming/overriding-ionic-variables/](https://ionicframework.com/docs/theming/overriding-ionic-variables/) in v4?

---

<div class="post-metadata">

**Author:** ![joshmorony](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/joshmorony/32/117695_2.png) [@joshmorony](https://forum.ionicframework.com/u/joshmorony)\
**Post date:** [July 15, 2018, 3:02am UTC](https://forum.ionicframework.com/t/overriding-ionic-sass-in-ionic-v4/135297/2 "2018-07-15T03:02:18Z")

</div>

Ionic 4 web components use CSS4 variables for styling, so you will be able to overwrite these values globally like this:

```auto
:root {
   --ion-some-value: 30px;
}

```

and the variables also cascade like normal CSS rules, so you could also apply the variable changes only to specific selectors:

```auto
some-selector {
  --ion-some-value: 30px;
}

```

EDIT: For anybody who wants to know more about CSS4 variables in Ionic 4: [https://www.joshmorony.com/a-primer-on-css-4-variables-for-ionic-4/](https://www.joshmorony.com/a-primer-on-css-4-variables-for-ionic-4/)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [July 15, 2018, 5:47am UTC](https://forum.ionicframework.com/t/overriding-ionic-sass-in-ionic-v4/135297/3 "2018-07-15T05:47:25Z")

</div>

Cool thx for the answer, I’ll give a try

Do you know if there is a migration cheat sheet somewhere?

I mean a table which display old/new keys?

Like

```
v3 | v4
$font-family-md-base | --ion-whatever-value
```

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [July 18, 2018, 12:19pm UTC](https://forum.ionicframework.com/t/overriding-ionic-sass-in-ionic-v4/135297/4 "2018-07-18T12:19:05Z")

</div>

> [@joshmorony](#):
>
> overwrite these values globally

@joshmorony in the theory yes, but for fonts actually no it doesn’t work

in v3 I could do the following to set the following font style for the all iOS platform

```
$font-family-ios-base: "Lato";

```

in v4 settings the following doesn’t actually work

```
:root {
    font-family: "Lato";
    --ion-font-family: "Lato";
}

```

because the default font

```
:root[mode=ios] {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
    --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
 }

```

is stronger. I tried then to set the following

```
 :root {    
    &, &[mode=ios] {
     font-family: "Lato";
     --ion-font-family: "Lato";
}

```

but unfortunately the default font is still used. so in the case of font the only way I found to set the font globally was to do the following

```
* {
   // Fonts
  font-family: "Lato";
  --ion-font-family: "Lato";
}

```

---

<div class="post-metadata">

**Author:** ![wterrill](https://avatars.discourse-cdn.com/v4/letter/w/c6cbf5/32.png) [@wterrill](https://forum.ionicframework.com/u/wterrill)\
**Post date:** [September 11, 2018, 4:13pm UTC](https://forum.ionicframework.com/t/overriding-ionic-sass-in-ionic-v4/135297/5 "2018-09-11T16:13:38Z")

</div>

> [@joshmorony](#):
>
> [A Primer on CSS Variables/Custom Properties for Ionic | Josh Morony](https://www.joshmorony.com/a-primer-on-css-4-variables-for-ionic-4/)

Is there a list of default Ionic CSS4 variables? I’d like to change the button height on a certain page and I’m taking stabs in the dark about what the CSS4 variable would be. (–ion-button-height doesn’t seem to work… but I’m guessing at that)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [October 11, 2018, 7:54am UTC](https://forum.ionicframework.com/t/overriding-ionic-sass-in-ionic-v4/135297/6 "2018-10-11T07:54:39Z")

</div>

There many tutorials now available, like the articles or video provided by @joshmorony, therefore I close this post

---

<div class="post-metadata">

**Author:** ![comadaihiep92](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/comadaihiep92/32/132663_2.png) [@comadaihiep92](https://forum.ionicframework.com/u/comadaihiep92)\
**Post date:** [June 10, 2020, 9:54am UTC](https://forum.ionicframework.com/t/overriding-ionic-sass-in-ionic-v4/135297/7 "2020-06-10T09:54:16Z")

</div>

hello, i try to remote carot arrow but i can’t remote it. I use Ionic5 with Reactjs. Please help. ![ionic delete flat arrow of IonSelect](https://global.discourse-cdn.com/ionicframework/original/3X/8/5/8547aa9b66e5f723193fe8a631ff43da0a5315cf.png)

---

<div class="post-metadata">

**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, 8:54pm UTC](https://forum.ionicframework.com/t/overriding-ionic-sass-in-ionic-v4/135297/8 "2021-07-19T20:54:36Z")

</div>