Different platform css for each class

What should I do if I want to have different css for some specific classes.
What can I do to achieve something like this (below no working)

 .fixed-content {
    .ios {
      background-color: red;
    }
    .md {
      background-color: blue;
    }
    .wp {
      background-color: green;
    }
  }

I think you can do

if (this.platform.is('ios')) { // else android, wp
     //than set css variable here
}

and then use that variable for templating

Hi, thanks for replying. I think I found a solution, I was searching a way to have a uniform appearance for my app. So in app.module.ts, I set the config mode to ‘md’. now the design look consistent. :), I will mark this as correct since this answer my question