如何优化重复引入mixin的SCSS代码，使其更符合DRY原则

你不需要重复两次引入相同的mixin，现有写法虽然能生效，但存在代码冗余，完全可以合并为一次调用降低维护成本。

优化后写法 #

.content {
    padding: 0 40px;

    &.isActive {
      padding: 20px 40px;
      background: black;
      color: $color-white;
      border-right: none;

      .meta {
        border-bottom: none;
      }
    }

    @include tablet-vertical-down {
      // 同时匹配普通.content和带.isActive类的.content
      &, &.isActive {
        border: 0;
        padding: 0;
      }
    }
  }

原理解释 #

• 上述写法中，&代表当前选择器.content，&, &.isActive就可以同时命中<div class="content">和<div class="content isActive">两类元素，仅需要一次@include调用就能让响应式规则对两类元素同时生效。
• 媒体查询内的样式定义顺序晚于非响应式的默认样式，优先级足够覆盖之前设置的padding和border属性，最终效果和你原本重复两次调用mixin的写法完全一致。
• 后续如果需要调整小屏下的样式，仅需要修改一处即可，不用同步更新两处代码，减少维护出错的概率。

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