CodePen

HTML

            
              
<div class="container">
  <h1 class="title">Mixins from Philadelphia Sass Meetup #7</h1>
  <div class="section-one">
    <h2>Section Header 1</h2>
    <p>
      Phasellus et arcu at arcu dapibus accumsan. Praesent nec sodales dui. Donec sit amet sem sapien, eget egestas.
    </p>
  </div>
  <div class="section-two">
    <h2>Section Header 2</h2>
    <p>
      Nullam ante mauris, lobortis non rutrum quis, sodales mattis augue. Aliquam tristique ultrices justo, vestibulum luctus elit porttitor quis. Quisque nibh eros, eleifend eu lacinia.
    </p>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @mixin section-header(
    $image,
    $padding-top: 4em,
    $background-position: 50% 50%,
    $side-wings: false
    ){
  padding-top: $padding-top;
  margin-left: -#{8px / ms(4)}em;
  margin-right: -#{8px / ms(4)}em;
  font-family: georgia;
  line-height: 1.1;
  text-transform: uppercase;
  font-weight: bold;
  background: black;
  color: white;
  background: {
    image: url($image);
    repeat: no-repeat;
    position: $background-position;
  };
  @include background-size(cover);
  @if ($side-wings != false) {
    position: relative;
    &:before, &:after {
      position: absolute;
      content: "\0020";
      top: 0;
      width: 100%;
      height: 100%;
      background: $side-wings;
    }
    &:before {
      left: -100%;
    }
    &:after {
      right: -100%;
    }
  }
}

html, body {
 overflow-x: hidden; 
}

body {
  background-color: #F5FDFD;
}

.container {
  max-width: 30em;
  margin: 0 auto;

}

// SECTION 2. GET STARTED
.section-one {
  > h2 {
    &:first-of-type {
      @include section-header('http://breakpoint-sass.com/images/point-break/bodhi-fire.gif', $background-position: 50% 60%, $side-wings: black);
    }
  }
}

// SECTION 3. ADVANCED
.section-two {
  > h2 {
    &:first-of-type {
      @include section-header('http://breakpoint-sass.com/images/point-break/ex-presidents.jpg', $background-position: 8% 40%, $side-wings: #d8d4c8, $padding-top: 6em);
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................