How to override the ionic sass variables?

Question

After reading the ionic2 documentation we can override the scss variables and change the style and colors of ionic2 component by override the scss variables in the variables.scss file.

I need to change the background color of the ionic2 sliding item. After reading the page ionic2 theming , I can change the background by changing the color of this two variables

$item-wp-sliding-content-background & $item-ios-sliding-content-background

This is my code:

$item-md-sliding-content-background: color($colors, rnbBlue);
$item-ios-sliding-content-background: color($colors,rnbBlue);

$rnbBlue: #1b5b94;

This is my app interface:

The last code is work because i saw the inspect elements that background-color changed to rnbBlue:

But the sliding items still white!... i saw in the inspect that .item-md have background:white :

when i disabled the background:white the color become rnbBlue,,, I know i can override this class by .item-md{...} but i don't need this method,, because doesn't the best practice

NOTE: I'm using "ionic-angular": "3.6.0", "ionic-native": "^2.9.0",

Now my question is: Why the override method not working well?!

Thanks.

Gabriel Barreto Gabriel Barreto · Accepted Answer · 2018-01-31T11:20:58

You clearly misundesrtood the $item-xx-sliding-content-background variable. That's not for the item background color per se, it's for the background that'll appear when you slide an ion-item-sliding pass the slidable content.

So try this code

<ion-item-sliding #item>
  <ion-item>
    Item
  </ion-item>
  <ion-item-options side="right">
    <button ion-button (click)="unread(item)">Unread</button>
  </ion-item-options>
</ion-item-sliding>

Grab the item and drag it to de left, you'll see that the background'll be the $rnbBlue color.

There's only a background color for wp, you can find all SASS variables here.

But saying you don't want to override the CSS via SCSS file because it isn't the best practice is wrong. Sure updating it via SASS is nice, it's all organized and easy to find, but if it was the only correct way we would have variables for all the possible CSS properties for every component.

You can override CSS in the SCSS files, you just need to write it in the best possible way.

Do you want to override the item background-color only for that page? Go to that component .scss file and do

my-component-tag {
  .item { /* This'll override the item for all platforms, if you want just for ios you can try .item-ios*/
    background-color: #1b5b94;
  }
}

Do you want to override it for all your app? So go to src/app/app.scss file and override there.

Just remember its'll up to you to organize your app CSS code, if you want to stick to variabes that's fine, but somewhere it'll be needed for you to use some CSS, and that's fine too. If you're afraid of getting a messy code try using BEM, it's easy and you'll have a good and organized code.

Hope this helps.

How to override the ionic sass variables?

1 Answers