title: Translating media queries from LESS to SCSS
body: <p>I'm trying to update some old LESS style sheets into SCSS but am running into an issue translating media queries.</p>
  
  <p>The LESS variables are as follows:</p>
  
  <pre><code>@lg: ~"(min-width: 1201px)";
  @md: ~"(min-width: 993px)";
  @sm: ~"(min-width: 769px)";
  @xs: ~"(max-width: 768px)";
  </code></pre>
  
  <p>And are referenced in this manner:</p>
  
  <pre><code>.modal-dialog {
        margin: 100px auto;
        @media @md {
          width: 880px;
        }
      }
  </code></pre>
  
  <p>I've translated this into the following SCSS variables:</p>
  
  <pre><code>$lg: "#{min-width: 1201px}";
  $md: "#{min-width: 993px}";
  $sm: "#{min-width: 769px}";
  $xs: "#{max-width: 768px}";
  </code></pre>
  
  <p>and the following usage:</p>
  
  <pre><code>.modal-dialog {
    margin: 100px auto;
    @media ($md) {
      width: 880px;
    }
  }
  </code></pre>
  
  <p>The code in question belongs to a .Vue component and is being compiled using SASS Loader FWIW.  The code compiles (no errors) but the actual queries don't seem to be working.  Thanks!</p>