How to apply different class styles to element for different screen sizes?

Asked Dec 07 '20 at 16:53

Active Dec 07 '20 at 16:53

Viewed 69 times

So in my project I have included Sass styles from a third party library (trough node modules). Normally nobody touches such code as it is subject to updates etc. However the design from artist requires to apply class x styles when its desktop and y class styles when its mobile to same element. I tried something like:

.z {
  @extend .x;
}

@include media-breakpoint-down(sm) {
    .z {
      @extend .y;
    }
}

But SASS doesn't allow this. You may not @extend an outer selector from within @media.

Another way is to duplicate the element. One has class x another y. And then show/hide them according to screen size, but that's bad for SEO and also code looks ugly.

I wonder if there is a graceful solution to this problem!?

asked Dec 07 '20 at 16:53

trshmanx

2

Consider using media queries to set your styles. – Lae Dec 07 '20 at 17:01
1

Here's another question describing using a @mixin instead: [Extending Selectors within Media Queries](https://stackoverflow.com/questions/14840918/extending-selectors-from-within-media-queries-with-sass) – Gabriel Petersen Dec 07 '20 at 17:18
I can NOT convert 3rd party lib classes to mixins @GabrielPetersen – trshmanx Dec 07 '20 at 17:31
@Lae the above example show, that media queries can't really be used for extending existing classes. – trshmanx Dec 07 '20 at 17:34
1

@Lae no it wont and the link is already pasted in 2nd comment – trshmanx Dec 07 '20 at 18:13

How to apply different class styles to element for different screen sizes?

0 Answers0