bencallahan

<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="not print" href="mq.css">

bencallahan

@media (max-width: 1000px) {

  html:root {
      min-width: 100%;
  }
  
  .block, .inner-col {
      width: 90%;
      margin-left: 5%;

bencallahan

// mq.scss
// For user agents that support media queries
@import "my-media-mq"; // where my-base and my-media are defined
@import "styles";


// nomq.scss
// For user agents that don't support media queries
@import "my-media-nomq"; // where my-base and my-media are defined
@import "styles";

bencallahan

// _styles.scss

// all styles not in media queries are served through "my-base"
@include my-base {
  header, section, aside, footer {
    background-color: #ddd;
    margin: 1em 5%;
    padding: 1em 5%;
    width: 80%;
    float: left;

bencallahan

// _my-media-nomq.scss

@mixin my-base {
  // never serve the base styles to old IE
  // (it will already receive this in mq.css)
  // note, SCSS won't compile unless you use @content
  @if false {
    @content;
  }
}

bencallahan

// _my-media-mq.scss
@mixin my-base {
  // just pass the content through
  @content;
}

@mixin my-media($theQuery, $serveToOldIE: true) {
  // interpret the media query passed in
  // and wrap the content in that query
  @media #{$theQuery} {

bencallahan

/* basic.css */

div.column {
   width: 100%;
}

@media print {
   nav, video {
      display: none;
   }

bencallahan

@media (min-width: 30em) {
  /* styles here */
}

bencallahan

<link rel="stylesheet" media="screen, projection, tv" href="c/mq.css">

bencallahan

@media (not print, braille, embossed, speech, tty) and (min-width: 30em) {
  /* styles here */
}