基于引导网格断点为自定义类实现 css 特异性

Question

我正在尝试创建自己的宽度类，以使用引导程序网格断点的引导程序。 这些类被命名为w-10, w-20，宽度分别为 10% 和 20%，或者命名为 w-sm-10 w-sm-20，在宽度大于 @987654324 的屏幕上宽度为 10% 和 20% @(576px)，但在移动设备上会有它们的初始宽度。

使用这个 sn-p 我已经能够创建具有这种效果的类。

@import 'node_modules/bootstrap/scss/bootstrap.scss';

$i : 10;
@while $i <= 90 {
  .w-#{$i} {              //names like w-40, w-60
    width: #{"#{$i}%"};   
  }
  @each $bp-name, $bp-pixels in $grid-breakpoints {   //looping through xs, sm, md, lg, xl and their pixel values
    .w-#{$bp-name}-#{$i} {  //names like w-md-40
      width: #{"#{$i}%"};
    }
    @media screen and (max-width: $bp-pixels) {       //Remove the width at the corresponding screen widths
      .w-#{$bp-name}-#{$i} {
        width: initial;
      }
    }
  }
  $i : $i + 10;
}

---

只要我的元素只有其中一个类，此解决方案就可以工作，但在分配 2 个或更多类时会中断，因为没有为这些类中的任何一个分配优先级

例如。此类应在比 lg 宽的屏幕上具有 50% 的宽度，在比 sm 宽的屏幕上具有 70% 的宽度，在所有小于 sm 的屏幕上具有 90% 的宽度，但这个宽度的 div 将始终为 90% .

<div class='w-lg-50 w-sm-70 w-90'></div>

---

我读过一些关于 css-specificity 的文章，但不能完全理解它

Answer 1

在您的媒体查询中使用min-width 而不是max-width，这表示如果您的元素至少有这么宽，那么就应用这个属性。

此外，如果您使用 2 个循环，则所有 w-40、w-60 类都在 w-sm-40、w-md-40... 类之前定义，然后 sm 和 md 类优先于之前的课程。

同样，所有xs 类都定义在sm 类之前，因此sm 类优先于xs 类，依此类推，直至md、lg 和@ 987654335@

//Creates width classes like w-40, w-60 ...
$i : 10;
@while $i <= 90 {
  .w-#{$i} {              //names like w-40, w-60
    width: #{"#{$i}%"};   
  }
  $i : $i + 10;
}

@each $bp-name, $bp-pixels in $grid-breakpoints {   //looping through xs, sm, md, lg, xl and their pixel values
  $i : 10;
  @while $i <= 90 {
    @media (min-width: $bp-pixels){ //only works if the screen is wider than this
      .w-#{$bp-name}-#{$i} {  //names like w-md-40
          width: #{"#{$i}%"};
      }
    }
    $i : $i + 10;
  }
}