Need explanation about scss file


#1

I have specific scss file for most of my pages.

Why changing the style of a ‘td’ in one scss file affects all the other pages?

The reason is probably because I imported it in the app.core.scss file, but I did not know that it will affect all the other pages.

Any suggestion to avoid that behavior?

Thanks


#2

Having a .scss file in your page (module) folder is just a matter of organizing the styles corresponding to html templates for your page (module). At the end (as you do that) you include these scss files in app.core.scss where they get combined and applied as a whole.

If you want your styles to be only applied to your page then you need to use CSS selector techniques for e…g assuming your page you have

then styles defined in your page1.scss could look like this ->

.my-page1 ion-item {
border: 1px solid blue;
}

now because of this only ion-item elements that appear with-in ion-content that has class my-page1 will be styled.

Regards
Kapil


#3

Kapil,

Did you suppose to have something before “then styles defined…”?

Probably the “my-page1” was within that part?


#4

yes some how my code snippet got remove !!

another attempt

let’s say your page has

<ion-content class="my-page1">
  <ion-item>
 </ion-item>
</ion-content>

#5

Excellent! Thanks for the help