title: How to use @support and @media together in Sass?
body: <p>Both statements are not seem to be valid in Sass:</p>
  <pre><code>@supports (display: -ms-grid) {
    @media screen and (min-width: $breakpoint-sm) {
      display: block;
    }
  }
  </code></pre>
  <p><strong>or</strong></p>
  <pre><code>@media screen and (min-width: $breakpoint-sm) {
    @supports (display: -ms-grid) {
      display: block;
    }
  }
  </code></pre>
  <p>Are there any solution to use both together? Something like <code>@media screen and (min-width: $breakpoint-sm) and @supports (display: -ms-grid) {...}</code>?</p>