如何通过媒体查询结合SCSS为类切换不同CSS文本样式？

我创建了一个专门用于文本样式的CSS文件，示例如下：

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

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

...

还有一个.profile类：

.profile {
  ...
}

想让.profile类在桌面端应用.h1_24的样式，在移动端（最大宽度768px）切换为.h5_18的样式，预期代码结构如下：

@import "text-styles.css"

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

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

请问能否通过SCSS的@include或@mixin实现该需求？

当然可以，用SCSS的@mixin封装文本样式，再通过@include复用是最灵活的方案，具体步骤如下：

1. 将文本样式转为SCSS混合宏（Mixin） #

把原有的CSS文本样式类改成@mixin，这样可以在任意选择器中直接引入样式，不需要依赖类名继承。修改后的text-styles.scss文件如下：

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

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

2. 在主SCSS文件中复用Mixin #

导入封装好的mixin文件，然后在.profile选择器和媒体查询中分别引入对应的文本样式：

@import "text-styles.scss";

.profile {
  @include h1_24;
  // 这里可以添加.profile的其他基础样式
}

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

补充说明 #

如果不想修改原有的CSS文件，也可以用SCSS的@extend来继承类样式，但@extend会将选择器合并（比如生成.profile, .h1_24 { ... }），而@mixin是直接将样式代码插入到目标选择器中，对于响应式场景来说，@mixin的方式更清晰，避免不必要的选择器合并。

内容的提问来源于stack exchange，提问作者Danny711