Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="chocolate" class="page-section pad-section">
  <div class="page-content">
    <h1>Heading to Section</h1>
    <h2>Subheading of Section</h2>
  </div>
</div>
<div id="hotpink" class="page-section angled-section">
  <div class="page-content">
    <h1>Heading to Section</h1>
    <h2>Subheading of Section</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a pharetra erat. Vestibulum non varius ligula. Praesent consequat ante ipsum, at mollis mauris dapibus et. Vivamus lacinia mi at leo vulputate egestas. Etiam tortor enim, pretium id dolor vel, scelerisque tempus nisi. Integer finibus diam sed velit fringilla, quis suscipit magna semper. Donec lobortis, augue sit amet dapibus accumsan, orci metus viverra metus, sed scelerisque odio arcu id tortor.</p>
    <p>Vivamus pellentesque condimentum tellus et feugiat. Vestibulum consectetur eget purus at egestas. Aliquam finibus consectetur ex, at feugiat justo. Aenean ac laoreet odio. Phasellus at lectus lacinia, interdum massa fringilla, porta dui. Mauris vestibulum, arcu vitae pretium vehicula, massa tellus scelerisque tellus, in dignissim metus dolor id turpis. Duis placerat sed orci nec varius.</p>
  </div>
</div>
<div id="orange" class="page-section angled-section">
  <div class="page-content">
    <h1>Heading to Section</h1>
    <h2>Subheading of Section</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a pharetra erat. Vestibulum non varius ligula. Praesent consequat ante ipsum, at mollis mauris dapibus et. Vivamus lacinia mi at leo vulputate egestas. Etiam tortor enim, pretium id dolor vel, scelerisque tempus nisi. Integer finibus diam sed velit fringilla, quis suscipit magna semper. Donec lobortis, augue sit amet dapibus accumsan, orci metus viverra metus, sed scelerisque odio arcu id tortor.</p>
    <p>Vivamus pellentesque condimentum tellus et feugiat. Vestibulum consectetur eget purus at egestas. Aliquam finibus consectetur ex, at feugiat justo. Aenean ac laoreet odio. Phasellus at lectus lacinia, interdum massa fringilla, porta dui. Mauris vestibulum, arcu vitae pretium vehicula, massa tellus scelerisque tellus, in dignissim metus dolor id turpis. Duis placerat sed orci nec varius.</p>
  </div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

body {
  font-family: helvetica neue;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

.page-section {
  background-color: #CCC;
  background-size: cover;
  color: #FFF;
  box-sizing: border-box;
  min-height: 100px;
  padding: 25px;
  position: relative;
  
  &.pad-section {
    padding-bottom: 75px;
  }
  
  &.angled-section {
  position: relative;
  margin: -25px 0;
  padding: 50px 25px 0 25px;
  transform: skewY(-2deg);
  z-index: 10;
  .page-content {
    transform: skewY(2deg);
  }
}
}


#hotpink {
  background-image: url("http://c1.staticflickr.com/1/532/19882859414_4d1b05294e_c.jpg");
  min-height: 500px;
}
#orange {
  background-image: url('http://c1.staticflickr.com/1/534/19882058853_be4a88c6c6_c.jpg');
  min-height: 500px;
  text-align: right;
}

SassMeister-output.css

body {
  font-family: helvetica neue;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

.page-section {
  background-color: #CCC;
  background-size: cover;
  color: #FFF;
  box-sizing: border-box;
  min-height: 100px;
  padding: 25px;
  position: relative;
}

.page-section.pad-section {
  padding-bottom: 75px;
}

.page-section.angled-section {
  position: relative;
  margin: -25px 0;
  padding: 50px 25px 0 25px;
  transform: skewY(-2deg);
  z-index: 10;
}

.page-section.angled-section .page-content {
  transform: skewY(2deg);
}

#hotpink {
  background-image: url("http://c1.staticflickr.com/1/532/19882859414_4d1b05294e_c.jpg");
  min-height: 500px;
}

#orange {
  background-image: url("http://c1.staticflickr.com/1/534/19882058853_be4a88c6c6_c.jpg");
  min-height: 500px;
  text-align: right;
}

SassMeister-rendered.html

<div id="chocolate" class="page-section pad-section">
  <div class="page-content">
    <h1>Heading to Section</h1>
    <h2>Subheading of Section</h2>
  </div>
</div>
<div id="hotpink" class="page-section angled-section">
  <div class="page-content">
    <h1>Heading to Section</h1>
    <h2>Subheading of Section</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a pharetra erat. Vestibulum non varius ligula. Praesent consequat ante ipsum, at mollis mauris dapibus et. Vivamus lacinia mi at leo vulputate egestas. Etiam tortor enim, pretium id dolor vel, scelerisque tempus nisi. Integer finibus diam sed velit fringilla, quis suscipit magna semper. Donec lobortis, augue sit amet dapibus accumsan, orci metus viverra metus, sed scelerisque odio arcu id tortor.</p>
    <p>Vivamus pellentesque condimentum tellus et feugiat. Vestibulum consectetur eget purus at egestas. Aliquam finibus consectetur ex, at feugiat justo. Aenean ac laoreet odio. Phasellus at lectus lacinia, interdum massa fringilla, porta dui. Mauris vestibulum, arcu vitae pretium vehicula, massa tellus scelerisque tellus, in dignissim metus dolor id turpis. Duis placerat sed orci nec varius.</p>
  </div>
</div>
<div id="orange" class="page-section angled-section">
  <div class="page-content">
    <h1>Heading to Section</h1>
    <h2>Subheading of Section</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a pharetra erat. Vestibulum non varius ligula. Praesent consequat ante ipsum, at mollis mauris dapibus et. Vivamus lacinia mi at leo vulputate egestas. Etiam tortor enim, pretium id dolor vel, scelerisque tempus nisi. Integer finibus diam sed velit fringilla, quis suscipit magna semper. Donec lobortis, augue sit amet dapibus accumsan, orci metus viverra metus, sed scelerisque odio arcu id tortor.</p>
    <p>Vivamus pellentesque condimentum tellus et feugiat. Vestibulum consectetur eget purus at egestas. Aliquam finibus consectetur ex, at feugiat justo. Aenean ac laoreet odio. Phasellus at lectus lacinia, interdum massa fringilla, porta dui. Mauris vestibulum, arcu vitae pretium vehicula, massa tellus scelerisque tellus, in dignissim metus dolor id turpis. Duis placerat sed orci nec varius.</p>
  </div>
</div>