bdaley
11/12/2015 - 8:20 PM

Generated by SassMeister.com.

Generated by SassMeister.com.

SassMeister-rendered.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SASS Media Queries</title>
  <meta name="description" content="A short exercise to demo media queries in SASS">

</head>
<body>
<main>
  <h1>SASS Media Queries</h1>
  <img src="http://placehold.it/600x250" alt="Hero Image">
    

    <section>
      <header>
        <h1>News</h1>
      </header>
        
        <article>
          <header>
            <h1>Article 1</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>
        
                
        <article>
          <header>
            <h1>Article 2</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>
        
        
        <article>
          <header>
            <h1>Article 3</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>        
        
    </section>
    
    
        
        <article>
          <header>
            <h1>Article 4</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>   
    
            
        <article>
          <header>
            <h1>Article 5</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>
    
            
        <article>
          <header>
            <h1>Article 6</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>
</main>
</body>
</html>
SassMeister-output.css
content_copyfile_download
main > img {
  width: 100%;
}

article {
  width: 100%;
}
SassMeister-input.scss
content_copyfile_download
// ----
// libsass (v3.2.5)
// ----

$small-screen: 768px;
$medium-screen: 992px;
$large-screen: 1200px;


main {
    > img {
        width: 100%;
    }
    
    // Small Size MQ: Main is centered w/ left and right margins


}

article {
  width: 100%;

  // Small Size MQ: 2 columns

    
  // Medium Size: 3 columns

}
SassMeister-input-HTML.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SASS Media Queries</title>
  <meta name="description" content="A short exercise to demo media queries in SASS">

</head>
<body>
<main>
  <h1>SASS Media Queries</h1>
  <img src="http://placehold.it/600x250" alt="Hero Image">
    

    <section>
      <header>
        <h1>News</h1>
      </header>
        
        <article>
          <header>
            <h1>Article 1</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>
        
                
        <article>
          <header>
            <h1>Article 2</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>
        
        
        <article>
          <header>
            <h1>Article 3</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>        
        
    </section>
    
    
        
        <article>
          <header>
            <h1>Article 4</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>   
    
            
        <article>
          <header>
            <h1>Article 5</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>
    
            
        <article>
          <header>
            <h1>Article 6</h1>
          </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
        </article>
</main>
</body>
</html>