CSS断点选择器用SASS覆盖的问题

我有一个_display.scss部分

它包含@mixin和与displaycss属性相关的类

_display.scss

我开发了一个@mixin生成响应内容，该内容接受类的@content，并为每个断点生成不同的@media查询

.see{outline:1px solid black;padding:1em;}
// BREAKPOINT
$breakpoints: (
  "xs": 575px,
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px
);

@mixin d-block() {
  display: block;
}

@mixin d-none() {
  display: none;
}

.d-block{
    @include d-block();
}

.d-none{
    @include d-none();
}

// Generate all breakpoints from content
@mixin generate-responsive-content() {

  // Responsive styles
  // Loop over each size
  @each $breakName, $width in $breakpoints {

    // Check breakpoint
    @if ($breakName == 'xs' ) {
      $breakName: '-' + $breakName;

      @media (max-width: $width) {
        &#{$breakName} {
          @content
        }
      }
    }
    @else if ($breakName != 'xs' ) {
      $breakName: '-' + $breakName;

      @media (min-width: $width) {
        &#{$breakName} {
          @content
        }
      }

    } @else {
      @content;
    }

  }
}

.d-block{
    @include generate-responsive-content() {
        @include d-block();
    }
}

.d-none{
    @include generate-responsive-content() {
        @include d-none();
     }
}

这样：

.d-block{
    @include generate-responsive-content() {
        @include d-block();
    }
}

.d-none{
    @include generate-responsive-content() {
        @include d-none();
     }
}

// Generate all breakpoints from content
@mixin generate-responsive-content() {

  // Responsive styles
  // Loop over each size
  @each $breakName, $width in $breakpoints {

    // Check breakpoint
    @if ($breakName != "") {
      $breakName: '-' + $breakName;

      @media (min-width: $width) {
        &#{$breakName} {
          @content
        }
      }

    } @else {
      @content;
    }

  }
}

生成的类：.d-block、.d-block-xs、.d-block-sm

但通过这种方式，我不能用每个断点的.d-block类覆盖.d-none类，因为它们以前生成过，并且被.d-none类覆盖

我还有一个同名但没有断点变量的类，比如d-none-lg、d-block-lg，它们覆盖了所有其他类

看看这个。在这里，d-none变体覆盖每一类d-block

如何解决这个问题？

更新了答案，包括最大宽度断点

.see{outline:1px solid black;padding:1em;}
// BREAKPOINT
$breakpoints: (
  "xs": 575px,
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px
);

@mixin d-block() {
  display: block;
}

@mixin d-none() {
  display: none;
}

.d-block{
    @include d-block();
}

.d-none{
    @include d-none();
}

// Generate all breakpoints from content
@mixin generate-responsive-content() {

  // Responsive styles
  // Loop over each size
  @each $breakName, $width in $breakpoints {

    // Check breakpoint
    @if ($breakName == 'xs' ) {
      $breakName: '-' + $breakName;

      @media (max-width: $width) {
        &#{$breakName} {
          @content
        }
      }
    }
    @else if ($breakName != 'xs' ) {
      $breakName: '-' + $breakName;

      @media (min-width: $width) {
        &#{$breakName} {
          @content
        }
      }

    } @else {
      @content;
    }

  }
}

.d-block{
    @include generate-responsive-content() {
        @include d-block();
    }
}

.d-none{
    @include generate-responsive-content() {
        @include d-none();
     }
}

这就是输出：

.see {
  outline: 1px solid black;
  padding: 1em;
}

.d-block {
   display: block;
}


.d-none {
   display: none;
 }

@media (max-width: 575px) {
  .d-block-xs {
    display: block;
  }
}
@media (min-width: 576px) {
  .d-block-sm {
    display: block;
  }
}
@media (min-width: 768px) {
  .d-block-md {
    display: block;
  }
}
@media (min-width: 992px) {
  .d-block-lg {
    display: block;
  }
}
@media (min-width: 1200px) {
  .d-block-xl {
    display: block;
  }
}

@media (max-width: 575px) {
  .d-none-xs {
    display: none;
  }
}
@media (min-width: 576px) {
  .d-none-sm {
    display: none;
  }
}
@media (min-width: 768px) {
  .d-none-md {
    display: none;
  }
}
@media (min-width: 992px) {
  .d-none-lg {
    display: none;
  }
}
@media (min-width: 1200px) {
  .d-none-xl {
    display: none;
  }
}

更新的代码笔：这是OPs代码笔，更新如下：

以下是笔中的代码：

.看{ 外形：1px纯黑； 填充：1em； } d区{ 显示：块； } d-无{ 显示：无； } @介质最大宽度：575px{ .d-block-xs{ 显示：块； } } @介质最小宽度：576px{ d-块-sm{ 显示：块； } } @介质最小宽度：768px{ .d-block-md{ 显示：块； } } @媒体最小宽度：992px{ d-块-lg{ 显示：块； } } @介质最小宽度：1200px{ .d-block-xl{ 显示：块； } } @介质最大宽度：575px{ .d-none-xs{ 显示：无； } } @介质最小宽度：576px{ .d-none-sm{ 显示：无； } } @介质最小宽度：768px{ .d-none-md{ 显示：无； } } @媒体最小宽度：992px{ d-none-lg{ 显示：无； } } @介质最小宽度：1200px{ .d-none-xl{ 显示：无； } } 我什么都看不到，因为d-none覆盖了所有内容 检查CSS样式D-BLOCK-LG覆盖所有内容

---

我已经为您创建了一个快速演示-它的工作如预期。我想你只需要交换订单。首先生成d-none类，然后生成d-block类

---

我不能用.d-block类重写.d-none类，我不知道这意味着什么。你能发布更多的输出吗？你能发布一下generate responsive content mixin做了什么吗？@Desifor如果我放一个d-none类和d-block-md，类d-block-md和其他d-block-**类总是被d-none覆盖，因为它是mixin最后一次写入的。我仍然不明白被覆盖的是什么，因为mixin不应该覆盖任何内容。添加$breakName和$breakpoints变量，这样我们就可以运行您所拥有的。我的意思是，mixin生成响应内容生成的类会被覆盖。但是，如果我想将.d-none-md用于md，而将.d-block-xs用于xs，我就不能，因为它们总是会被覆盖。因此，这不是SCSS问题，而是HTML类的问题。如果有这样的元素-它将显示为块，直到视口宽度为992px。我仍然不确定实际的问题是什么。看看我的代码笔。啊，你需要稍微修改你的混音，以包含最小断点的最大宽度。我已经更新了我的答案。这是你的代码笔，代码如下：这不是一个解决方案，因为如果想要d-none不被d-block覆盖？我有一个解决方案，就是生成具有相同断点的类，如：.d-block-xs{}、.d-none-xs{}、.d-block-sm{}、.d-none-sm{}，但我不知道如何生成。@Ale_info您检查了代码笔链接了吗。我已经创建了4个案例，它们按照预期工作。你能告诉我一个不起作用的场景吗？

.d-none{
    @include generate-responsive-content() {
        @include d-none();
     }
}

.d-block{
    @include generate-responsive-content() {
        @include d-block();
    }
}