title: Implementing css specificity for custom classes based on bootstrap grid breakpoints
body: <p>I am trying to create my own width classes that make use bootstrap of bootstraps grid breakpoints.
  These classes are named things like <code>w-10, w-20</code> and would have widths of 10% and 20% respectively, or would have named like <code>w-sm-10 w-sm-20</code> and would have widths of 10% &amp; 20% on a screen that has a width larger than <code>sm</code>(576px), but would have their initial width on mobile. </p>
  
  <p>Using this snippet I've been able to create classes that have this effect.</p>
  
  <pre><code>@import 'node_modules/bootstrap/scss/bootstrap.scss';
  
  $i : 10;
  @while $i &lt;= 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;
  }
  </code></pre>
  
  <hr>
  
  <p>This solution works as long as my elements only have one of these classes, but breaks when 2 or more are assigned because there is no precedence assigned to any of these classes</p>
  
  <p>Ex. This class should have a width of 50% on screens wider than lg, 70% on screens wider than sm, and a width of 90% on all screen less wide than sm, but instead the div of this width will just always be 90%.</p>
  
  <pre><code>&lt;div class='w-lg-50 w-sm-70 w-90'&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>I've read a bit about <a href="https://www.w3schools.com/css/css_specificity.asp" rel="nofollow noreferrer">css-specificity</a> but can't quite wrap my head around it</p>