Ionic how to use sass variable

Ionic Framework ionic-v3
1

I would like to adjust my popover width and height. However from the ionic framework it shows for example, “$popover-md-min-width” how do I use it? As I pasted in the scss file it’s not working. Thankyou.

1 Like
2

See: https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/

1 Like
3

in your project theme folder in variables.scss paste ur variable and give it a value. it should be something like this

// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
$popover-md-min-width: 100px;
1 Like
4

But I would like it to soley appear on a page and not affect all app

5

-> But I would like it to soley appear on a page and not affect all app

Then you can’t use a ‘shared variable’.

2 Likes
6

then i think the best way is to give your page an id… and in the page .scss file style it as you like
for example lets think this is your component html:

<ion-content id="myPage" >
	<ion-header>
	  <ion-navbar>
	    <ion-title color="light">your navbar title!</ion-title>
	  </ion-navbar>
	</ion-header>
	.
        .
        .
</ion-content>

then style everything that you want in the .scss file with css selectors as below:

#myPage myElement{
   some style;
}

this way not only it applies only to this page… but also it wont get overwritten by ionic default styles.

1 Like
7

thaankyou guys for all the help much clearer now thankyou.

1 Like
8

Use the page’s selector so any styles only apply to that page:

@IonicPage()
@Component({
  selector: 'page-introduction',
  templateUrl: 'introduction.html'
})

And:

page-introduction {

  .swiper-pagination-bullet-active {
    background: white;
  }
}

See: https://github.com/Robinyo/big-top/tree/master/src/pages/introduction

4 Likes