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?
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