Generated by SassMeister.com.

SassMeister-input-HTML.html

  <div class="wrap">
    <div class="main-content">
     <div class='full-bleed'>
     <img src="https://github.com/caraya/books-as-apps/blob/master/images/typography.jpg" alt="image showing multiple typefaces being written in several directions" class='header-image'>
       <p>Image licensed under CC Attribution by <a href="https://www.flickr.com/photos/tarale/2897185492/">Taryn</a></p>
     </div>
      <h1>Learning to play with typography</h1>

      <p>Over the past few months I've rekindled my interest in typography; how it works in print and also how it works online. I'm also working through two typography books that are very relevant to both typographic work and overall front end design and development. <a href="http://oreil.ly/1QuoKut">Responsive Typography</a> by Jason Pamental and <a href="http://abookapart.com/products/on-web-typography">On web typography</a> by Jason Santa Maria</p>

      <p>But it wasn't until fluent that I got a better idea of why typography is important.I got the chance to talk with both Eric Meyer, one of my early web design influences, and Jason Pamental, the author of Responsive Typography and a very good presenter.</p>

      <p>What I got out of multiple presentations about CSS, typography and new technologies coming and going away (saddly) is that the basics are still important. With that in mind I'll look at typography through a series of exercises. The exercises can be edited and will change the display of the associated text; you can then copy and paste the resulting CSS to your own CSS/SCSS stylesheet.</p>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// Susy (v2.2.5)
// ----

 
@import "susy";
// Susy map to tell it how to layout the content
$susy: (output: isolate, columns: 16, container: 1140px, global-box-sizing: border-box, gutter-position: split);
 
//@include border-box-sizing;
 
@mixin cf {
  &:after {
    content: " ";
    display: block;
    clear: both;
  }
}
 
// The wrapper for our content
.wrap {
  @include container;
  height: 100%;
}
 
.aside-left {
  @include span(3 of 16);
  //background-color: rgba(0, 0, 255, .1);
  height: 100vh;
  margin-top: 15em;
}
 
// The main content area
.main-content {
  //background-color: rgba(255, 0, 255, .1);
  @include span(10 of 16 at 4);
  @include cf;
}
 
.aside-right {
  @include span(3 of 16 at 13 last);
  @include cf;
  border-top: 3px double #ddd;
  border-bottom: 3px double #ddd;
  color: #666;
  line-height: 1.4em;
}
 
// The main content area when used as the second item in the grid
// when there's 
.main-content-simple {
  @include span(10 of 16);
  height: 100%;
  @include cf;
}

// What I'd like is for the full bleed class 
// (either in a div or directly in an img tag)
// to take the 16 columns or, if possible to 
// take the full width of the page
.full-bleed {
  @include span(16 of 16);
  @include cf;
  img .header-image {
    clear: both;
    position: absolute;
    width: 100vw;
    height: 25%;
  }
}

SassMeister-output.css

.wrap {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
.wrap:after {
  content: " ";
  display: block;
  clear: both;
}

.aside-left {
  width: 17.5%;
  float: left;
  margin-left: 0.625%;
  margin-right: 0.625%;
  height: 100vh;
  margin-top: 15em;
}

.main-content {
  width: 61.25%;
  float: left;
  margin-left: 19.375%;
  margin-right: -100%;
}
.main-content:after {
  content: " ";
  display: block;
  clear: both;
}

.aside-right {
  width: 17.5%;
  float: left;
  margin-left: 75.625%;
  margin-right: -100%;
  border-top: 3px double #ddd;
  border-bottom: 3px double #ddd;
  color: #666;
  line-height: 1.4em;
}
.aside-right:after {
  content: " ";
  display: block;
  clear: both;
}

.main-content-simple {
  width: 61.25%;
  float: left;
  margin-left: 0.625%;
  margin-right: 0.625%;
  height: 100%;
}
.main-content-simple:after {
  content: " ";
  display: block;
  clear: both;
}

.full-bleed {
  width: 98.75%;
  float: left;
  margin-left: 0.625%;
  margin-right: 0.625%;
}
.full-bleed:after {
  content: " ";
  display: block;
  clear: both;
}
.full-bleed img .header-image {
  clear: both;
  position: absolute;
  width: 100vw;
  height: 25%;
}

SassMeister-rendered.html

  <div class="wrap">
    <div class="main-content">
     <div class='full-bleed'>
     <img src="https://github.com/caraya/books-as-apps/blob/master/images/typography.jpg" alt="image showing multiple typefaces being written in several directions" class='header-image'>
       <p>Image licensed under CC Attribution by <a href="https://www.flickr.com/photos/tarale/2897185492/">Taryn</a></p>
     </div>
      <h1>Learning to play with typography</h1>

      <p>Over the past few months I've rekindled my interest in typography; how it works in print and also how it works online. I'm also working through two typography books that are very relevant to both typographic work and overall front end design and development. <a href="http://oreil.ly/1QuoKut">Responsive Typography</a> by Jason Pamental and <a href="http://abookapart.com/products/on-web-typography">On web typography</a> by Jason Santa Maria</p>

      <p>But it wasn't until fluent that I got a better idea of why typography is important.I got the chance to talk with both Eric Meyer, one of my early web design influences, and Jason Pamental, the author of Responsive Typography and a very good presenter.</p>

      <p>What I got out of multiple presentations about CSS, typography and new technologies coming and going away (saddly) is that the basics are still important. With that in mind I'll look at typography through a series of exercises. The exercises can be edited and will change the display of the associated text; you can then copy and paste the resulting CSS to your own CSS/SCSS stylesheet.</p>
  </div>
</div>