Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Writing inline media queries


First off, be aware that there have been a few more unrelated amendments to the HTML (and some more styles added in the Sass purely for presentational purposes). As we're not going to be writing any styles to target old IE, the conditional comments that provide helper classes for it have been removed.

Now we just have the following code at the start of the index.html file:

<!doctype html>
<html class="no-js" lang="en">
<head>

With that little bit of housekeeping out of the way, the markup for the main headline area has changed a little:

<h1 class="headline">
  <span class="headline-hero">Sass</span>
  <i class="ampersand">&amp;</i>
  <span class="headline-sidekick">Compass</span>
  <span class="forwho">for designers</span>
</h1>

With that markup in mind, here's the first block of style I'm adding to the _modules.scss file:

.headline {
  @extend %clearfix;
  margin: 0;
  font-weight: 400...