Generated by SassMeister.com.
<!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>
main > img {
width: 100%;
}
article {
width: 100%;
}
// ----
// 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
}
<!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>