在每个断点处寻址同一组CSS选择器。如何保持CSS DRY？

Question

我已经写CSS（SASS）已有几年了，我会说我很精通。但是，我想不出以下代码的好选择。

我现在的SASS，对于Stackoverflow有所简化：

.container {
  &.-left {
    h1, 
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
      left: 0;
    }
  }

  &.-right {
    h1, 
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
      right: 0;
    }
  }
}



@include breakpoint(small) {
  .container {
    &.-left {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        left: 10px;
      }
    }

    &.-right {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        right: 10px;
      }
    }
  }
}



@include breakpoint(medium) {
  .container {
    &.-left {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        left: 20px;
      }
    }

    &.-right {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        right: 20px;
      }
    }
  }
}



@include breakpoint(large) {
  .container {
    &.-left {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        left: 30px;
      }
    }

    &.-right {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        right: 30px;
      }
    }
  }
}

我不确定如何，但是我认为可以用更优雅的方式编写代码。为每个断点多次列出和寻址同一组选择器感觉很麻烦。您是否知道如何缩短此代码并使之更具可读性？我想使用CSS变量还是SASS函数？

Answer 1

您可以像这样在其他选择器中添加include：

.container {
  &.-left {
    h1, 
    h2 {
      left: 0;

      @include breakpoint(small) {
        left: 10px;
      }
      @include breakpoint(medium) {
        left: 20px;
      }
    }
  }

  &.-right {
    h1, 
    h2 {
      right: 0;

      @include breakpoint(small) {
        right: 10px;
      }
      @include breakpoint(medium) {
        right: 20px;
      }
    }
  }
}