title: What is the meaning of this unconventional CSS code?
body: <p>Helping a client update their Shopify theme. The previous designer used an unconventional method for the base grid. I need help translating the code.</p>
  
  <p>Read an old article about this subject, but I still did not understand.</p>
  
  <pre><code>$phone:            "screen and (max-width: 640px)";
  $tablet:           "screen and (min-width: 641px) and (max-width: 1007px)";
  $tablet-and-up:    "screen and (min-width: 641px)";
  $pocket:           "screen and (max-width: 1007px)";
  $lap:              "screen and (min-width: 1008px) and (max-width: 1239px)";
  $lap-and-up:       "screen and (min-width: 1008px)";
  $desk:             "screen and (min-width: 1240px)";
  $widescreen:       "screen and (min-width: 1500px)";
  
  .\31\/2, .\32\/4, .\36\/12 {
    width: 50%;
  }
  
  .\31\/3, .\34\/12 {
    width: 33.33333%;
  }
  
  .\32\/3, .\38\/12 {
    width: 66.66667%;
  }
  
  .\31\/4, .\33\/12 {
    width: 25%;
  }
  
  .\33\/4, .\39\/12 {
    width: 75%;
  }
  
  .\31\/12 {
    width: 8.33333%;
  }
  
  .\32\/12 {
    width: 16.66667%;
  }
  
  .\35\/12 {
    width: 41.66667%;
  }
  
  .\37\/12 {
    width: 58.33333%;
  }
  
  .\31\30\/12 {
    width: 83.33333%;
  }
  
  .\31\31\/12 {
    width: 91.66667%;
  }
  
  @media #{$phone} {
    .hidden-phone {
      display: none !important;
    }
  
    .\31\/2--phone, .\32\/4--phone, .\36\/12--phone {
      width: 50%;
    }
  
    .\31\/3--phone, .\34\/12--phone {
      width: 33.33333%;
    }
  
    .\32\/3--phone, .\38\/12--phone {
      width: 66.66667%;
    }
  
    .\31\/4--phone, .\33\/12--phone {
      width: 25%;
    }
  
    .\33\/4--phone, .\39\/12--phone {
      width: 75%;
    }
  
    .\31\/12--phone {
      width: 8.33333%;
    }
  
    .\32\/12--phone {
      width: 16.66667%;
    }
  
    .\35\/12--phone {
      width: 41.66667%;
    }
  
    .\37\/12--phone {
      width: 58.33333%;
    }
  
    .\31\30\/12--phone {
      width: 83.33333%;
    }
  
    .\31\31\/12--phone {
      width: 91.66667%;
    }
  }
  
  @media #{$tablet} {
    .hidden-tablet {
      display: none !important;
    }
  
    .\31\/2--tablet, .\32\/4--tablet, .\36\/12--tablet {
      width: 50%;
    }
  
    .\31\/3--tablet, .\34\/12--tablet {
      width: 33.33333%;
    }
  
    .\32\/3--tablet, .\38\/12--tablet {
      width: 66.66667%;
    }
  
    .\31\/4--tablet, .\33\/12--tablet {
      width: 25%;
    }
  
    .\33\/4--tablet, .\39\/12--tablet {
      width: 75%;
    }
  
    .\31\/12--tablet {
      width: 8.33333%;
    }
  
    .\32\/12--tablet {
      width: 16.66667%;
    }
  
    .\35\/12--tablet {
      width: 41.66667%;
    }
  
    .\37\/12--tablet {
      width: 58.33333%;
    }
  
    .\31\30\/12--tablet {
      width: 83.33333%;
    }
  
    .\31\31\/12--tablet {
      width: 91.66667%;
    }
  }
  
  @media #{$tablet-and-up} {
    .hidden-tablet-and-up {
      display: none !important;
    }
  
    .\31\/2--tablet-and-up, .\32\/4--tablet-and-up, .\36\/12--tablet-and-up {
      width: 50%;
    }
  
    .\31\/3--tablet-and-up, .\34\/12--tablet-and-up {
      width: 33.33333%;
    }
  
    .\32\/3--tablet-and-up, .\38\/12--tablet-and-up {
      width: 66.66667%;
    }
  
    .\31\/4--tablet-and-up, .\33\/12--tablet-and-up {
      width: 25%;
    }
  
    .\33\/4--tablet-and-up, .\39\/12--tablet-and-up {
      width: 75%;
    }
  
    .\31\/12--tablet-and-up {
      width: 8.33333%;
    }
  
    .\32\/12--tablet-and-up {
      width: 16.66667%;
    }
  
    .\35\/12--tablet-and-up {
      width: 41.66667%;
    }
  
    .\37\/12--tablet-and-up {
      width: 58.33333%;
    }
  
    .\31\30\/12--tablet-and-up {
      width: 83.33333%;
    }
  
    .\31\31\/12--tablet-and-up {
      width: 91.66667%;
    }
  }
  
  @media #{$pocket} {
    .hidden-pocket {
      display: none !important;
    }
  
    .\31\/2--pocket, .\32\/4--pocket, .\36\/12--pocket {
      width: 50%;
    }
  
    .\31\/3--pocket, .\34\/12--pocket {
      width: 33.33333%;
    }
  
    .\32\/3--pocket, .\38\/12--pocket {
      width: 66.66667%;
    }
  
    .\31\/4--pocket, .\33\/12--pocket {
      width: 25%;
    }
  
    .\33\/4--pocket, .\39\/12--pocket {
      width: 75%;
    }
  
    .\31\/12--pocket {
      width: 8.33333%;
    }
  
    .\32\/12--pocket {
      width: 16.66667%;
    }
  
    .\35\/12--pocket {
      width: 41.66667%;
    }
  
    .\37\/12--pocket {
      width: 58.33333%;
    }
  
    .\31\30\/12--pocket {
      width: 83.33333%;
    }
  
    .\31\31\/12--pocket {
      width: 91.66667%;
    }
  }
  
  @media #{$lap} {
    .hidden-lap {
      display: none !important;
    }
  
    .\31\/2--lap, .\32\/4--lap, .\36\/12--lap {
      width: 50%;
    }
  
    .\31\/3--lap, .\34\/12--lap {
      width: 33.33333%;
    }
  
    .\32\/3--lap, .\38\/12--lap {
      width: 66.66667%;
    }
  
    .\31\/4--lap, .\33\/12--lap {
      width: 25%;
    }
  
    .\33\/4--lap, .\39\/12--lap {
      width: 75%;
    }
  
    .\31\/12--lap {
      width: 8.33333%;
    }
  
    .\32\/12--lap {
      width: 16.66667%;
    }
  
    .\35\/12--lap {
      width: 41.66667%;
    }
  
    .\37\/12--lap {
      width: 58.33333%;
    }
  
    .\31\30\/12--lap {
      width: 83.33333%;
    }
  
    .\31\31\/12--lap {
      width: 91.66667%;
    }
  }
  
  @media #{$lap-and-up} {
    .hidden-lap-and-up {
      display: none !important;
    }
  
    .\31\/2--lap-and-up, .\32\/4--lap-and-up, .\36\/12--lap-and-up {
      width: 50%;
    }
  
    .\31\/3--lap-and-up, .\34\/12--lap-and-up {
      width: 33.33333%;
    }
  
    .\32\/3--lap-and-up, .\38\/12--lap-and-up {
      width: 66.66667%;
    }
  
    .\31\/4--lap-and-up, .\33\/12--lap-and-up {
      width: 25%;
    }
  
    .\33\/4--lap-and-up, .\39\/12--lap-and-up {
      width: 75%;
    }
  
    .\31\/12--lap-and-up {
      width: 8.33333%;
    }
  
    .\32\/12--lap-and-up {
      width: 16.66667%;
    }
  
    .\35\/12--lap-and-up {
      width: 41.66667%;
    }
  
    .\37\/12--lap-and-up {
      width: 58.33333%;
    }
  
    .\31\30\/12--lap-and-up {
      width: 83.33333%;
    }
  
    .\31\31\/12--lap-and-up {
      width: 91.66667%;
    }
  }
  
  @media #{$desk} {
    .hidden-desk {
      display: none !important;
    }
  
    .\31\/2--desk, .\32\/4--desk, .\36\/12--desk {
      width: 50%;
    }
  
    .\31\/3--desk, .\34\/12--desk {
      width: 33.33333%;
    }
  
    .\32\/3--desk, .\38\/12--desk {
      width: 66.66667%;
    }
  
    .\31\/4--desk, .\33\/12--desk {
      width: 25%;
    }
  
    .\33\/4--desk, .\39\/12--desk {
      width: 75%;
    }
  
    .\31\/12--desk {
      width: 8.33333%;
    }
  
    .\32\/12--desk {
      width: 16.66667%;
    }
  
    .\35\/12--desk {
      width: 41.66667%;
    }
  
    .\37\/12--desk {
      width: 58.33333%;
    }
  
    .\31\30\/12--desk {
      width: 83.33333%;
    }
  
    .\31\31\/12--desk {
      width: 91.66667%;
    }
  }
  /* Create each media query */
  @media #{$widescreen} {
    .hidden-widescreen {
      display: none !important;
    }
  
    .\31\/2--widescreen, .\32\/4--widescreen, .\36\/12--widescreen {
      width: 50%;
    }
  
    .\31\/3--widescreen, .\34\/12--widescreen {
      width: 33.33333%;
    }
  
    .\32\/3--widescreen, .\38\/12--widescreen {
      width: 66.66667%;
    }
  
    .\31\/4--widescreen, .\33\/12--widescreen {
      width: 25%;
    }
  
    .\33\/4--widescreen, .\39\/12--widescreen {
      width: 75%;
    }
  
    .\31\/12--widescreen {
      width: 8.33333%;
    }
  
    .\32\/12--widescreen {
      width: 16.66667%;
    }
  
    .\35\/12--widescreen {
      width: 41.66667%;
    }
  
    .\37\/12--widescreen {
      width: 58.33333%;
    }
  
    .\31\30\/12--widescreen {
      width: 83.33333%;
    }
  
    .\31\31\/12--widescreen {
      width: 91.66667%;
    }
  }
  </code></pre>
  
  <p>Hoping to understand the patterns for "\31" "\32" "\36" "\37", and hopefully a translation the first 12-grid declarations.</p>