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

我已经写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函数？

1。混搭 您可以使用

@mixin

存储选择器，然后

@将其包含在需要的地方：

@mixin defaultSelectors() {
  & {
    h1, 
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
      @content;
    }
  }
}

.container {
  &.-left {
    @include defaultSelectors {
      left: 0;
    }
  }

  &.-right {
    @include defaultSelectors {
      right: 0;
    }
  }
}

[...]


2.用一个变量
您还可以将选择器作为列表存储在变量中，然后使用：

1.混搭
您可以使用
@mixin
存储选择器，然后
@将其包含在需要的地方：

@mixin defaultSelectors() {
  & {
    h1, 
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
      @content;
    }
  }
}

.container {
  &.-left {
    @include defaultSelectors {
      left: 0;
    }
  }

  &.-right {
    @include defaultSelectors {
      right: 0;
    }
  }
}

[...]


2.用一个变量
您还可以将选择器作为列表存储在变量中，然后使用：

您可以在另一个选择器中添加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;
      }
    }
  }
}

您可以在另一个选择器中添加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;
      }
    }
  }
}

您只需要优化
h1、h2、h3…
选择器还是整个
.container、&.-right、&.-left、h1、h2…
选择器组？您是否只需要将
左
和
右
属性放入
&.-left
和
&.-right
中？它们总是相同的值吗？我只想/需要优化h1、h2、h3。。。部分不，
left
和
right
不是我必须设置的唯一属性。我只是简化了我的示例代码。好的，我取消了删除我的答案，这是你想要的吗？你需要只优化
h1，h2，h3…
选择器还是整个
.container，&.-right，&.-left，h1，h2…
选择器组？您是否只需要将
左
和
右
属性放入
&.-left
和
&.-right
中？它们总是相同的值吗？我只想/需要优化h1、h2、h3。。。部分不，
left
和
right
不是我必须设置的唯一属性。我只是简化了我的示例代码。好的，我取消了我的答案，这是你想要的吗？谢谢你的回答。这可能会骗人。但是正如我在问题中所说的，我在我的示例中稍微简化了代码。实际上，我必须设置的属性远远不止
左
和
右
。这意味着我必须在文件中包含几次不同的断点。我不理解多个属性的问题，每个规则可以设置多个属性。也许我们需要更多的信息？谢谢你的回答。这可能会骗人。但是正如我在问题中所说的，我在我的示例中稍微简化了代码。实际上，我必须设置的属性远远不止
左
和
右
。这意味着我必须在文件中包含几次不同的断点。我不理解多个属性的问题，每个规则可以设置多个属性。也许我们需要更多的信息？谢谢，mixin解决方案正是我想要的；-）谢谢，mixin解决方案正是我想要的；-）