Ionic CSS classes assignment

Question

I’m styling my app. Familiar with the basic theming components, SASS etc... But one thing that stands out and it not making sense is why when I preview the source in a running a

Answer 1

If you look at the Header Ionic API Docs, for you'll see there are Sass variables for 3 platforms - the abbreviation to right of colon is used to target platform specific styling rules:

• iOS : ios
• Material Design (default if in browser like Chrome) :md
• Windows Platform : wp

Plaform specific styles confirm that here

When you do ionic serve --lab you have the option to choose platform and get a feel for the default files render.

When you want to target CSS for specific platforms, then the nomenclature is:
[-]

Here's a more complete list of SASS variables for the different Ionic Components.
In your project there is a themes/variables.scss where you can use those values. You can define your own SCSS variables like $my-padding:5px; in here and then use that in your custom component CSS, and consequently have that constant declared once and you can globally apply. So my-component.scss has

[ion-item] {
   padding: $my-padding;
}

The toolbar source folder is here.

toolbar-header.ts contains the @Directive selector 'ion-header' for Typescipt class name: Header

toolbar.ts contains the @Directive selector 'ion-toolbar' for Typescript class name: Toolbar

There are scss files for the platforms..

• toolbar.ios.scss
• toolbar.md.scss
• toolbar.wp.scss

They seem to import:

• ionic.globals.scss

Furthermore you can configure things in your app-module.ts.

@ngModule({
 ....
 imports: [
   IonicModule.forRoot(MyApp, { // settings object
     iconMode: 'ios', // all platforms globally use ios icons
     tabsHighlight: true, // seems to work only on android
     platforms: {
        android: { tabsPlacement: 'top' // platform specific
        }
                }
   })

This should give you an insight