SCSS how do I use it

Ionic Framework ionic-v3
1

Hi, I am applying scss however, it does not take any effect.

HTML

<ion-content padding>
  <ion-grid>
    <ion-row>

        <ion-col col-12 class='card-size'>
                <div style="border-style: dotted; border-color:red; border-width:2px;">
                    <img src="" alt="">
                </div>

                <div end>
                  <ion-card>
                      <ion-list inset>
                          <ion-list-header>
                           TITLE
                          </ion-list-header>

SCSS

ion-row{
    text-align: center;
    
}

ion-card {
    
}

ion-list-header{
    font-size: 50px; 
    color: white;

}

Appreciate for any help. Thankyou.

2

Hi @RobertLow

please try below scss



  ion-row{
      text-align: center !important;

  }

  ion-card {

  }

  ion-list-header{
      font-size: 50px  !important;
      color: white !important;

  }
3

To center text you can use <ion-row text-center></ion-row> in your html. You shouldn’t really be creating extra CSS rules for that.

To read more about these CSS Utilities go: here

4

Thankyou. it works, however, Why It changes everything in the application is there a way for soley on the html itself?

5

I need to adjust ion card sizing and making it float to fit in to my desire position
is there any go around? thankyou.

6

you need to take a class name of the page as a parent in above-mentioned css by me

7

As described in the link I posted in my previous comment, you can use the CSS Utilities for floating elements as well. For sizing you could either use CSS or, as I like to do it (for the width atleast), using columns inside your rows.

For adding heights I mainly use CSS.

8

Add the css rules to the scss file of the page you’re working in. Then the rules will only apply to that specific page. Adding things to app.scss will apply the rules over the whole app

/src/pages/test/test.html
/src/pages/test/test.module.ts
/src/pages/test/test.scss  <<<---- add them here
/src/pages/test/test.ts```
9

Thankyou for the help! :grinning:

10

Yes I did that but still affected the whole app. I guess was because I remove the default header. Thank you for the help too.:grinning:

11

Alright, will take a look now. Thankyou for your help deeply appreciated. :grinning:

1 Like