csssass

Apply styles of different CSS classes based on media query for a class

I created a css file where I have styles for texts specifically. Example

.h1_24 {
   font-weight: 700;
   font-size: 24px;
   line-height: 140%;
}

.h5_18 {
   font-weight: 500;
   font-size: 18px;
   line-height: 120%;
}

...

Let's say I have a class for a profile card:

.profile {
  ...
}

How would some use styles of .h1_24 in profile for desktops but then switch to .h5_18 on mobile?

@import "text-styles.css"

.profile {
  // use here styles of .h1_48
}

@media only screen and (max-width: 768px) {
  .profile {
    // use now styles of .h5_18
  }
}

Is it something that scss can do using @include or @mixin?

Solution

  • I'm pretty sure that what you want is to @extend the class.

    @import "text-styles.css"

.profile {
  @extend .h1_48;
}

@media only screen and (max-width: 768px) {
  .profile {
    @extend .h5_18;
  }
}

    For more, I reccomend reading W3Schools