css/scss：有没有办法清理它并使其干燥？

Question

我有一个 class content 和 isActive。我是否必须像下面那样“包含”mixin 两次，以便在我有 <div class="content"> 和 <div class="content isActive">

这样的元素时应用它

 .content {
    padding: 0 40px;

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

      .meta {
        border-bottom: none;
      }

      @include tablet-vertical-down {
        border: 0;
        padding: 0;
      }
    }

    @include tablet-vertical-down {
      border: 0;
      padding: 0;
    }
  }

Answer 1

您可以使用&来引用当前选择器并与&.isActive组合。

.content {
    padding: 0 40px;

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

      .meta {
        border-bottom: none;
      }
    }

    &, &.isActive {
      @include tablet-vertical-down {
        border: 0;
        padding: 0;
      }
    }
  }