Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="media">

  <img class="media-src" src="http://lorempixel.com/200/200" alt="">
  <div class="media-text">
    <h2 class="media-heading">Media Heading</h2>
    <p> Text Content. lorem ipsum, etc.</p>
  </div>
  
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

//can use variables to store values and other variables
$mica-aqua: #7FDBFF;
$mica-purple: #B10DC9;
//fonts
$base-family: helvetica, arial, sans-serif;
$media-border: $mica-aqua;
//$media-border: #999 default;

//@mixin transitions {  // allows you to set properies AND values AND use additional selectors ....
//@mixin can also act as an entire library of treatment for project
//@mixin transitions($time) { // they can also pass parameters like time
  @mixin transitions($time: 1s) {    // can also set the default value
  //@mixin transitions($property: all, $time: 1s) {  // can have multi. parameteres
  transition: all 1s ease-out;
  
  .csstransitions & {
    backface-visibility: hidden;
  }
}

//for loops
@for $i from 1 through 6 {
  h#{$i} { //interpolation ... that passes variables thru
  margin-border: 0;
  font-size: 16px*$i;
  }
}

@each $social in facebook, twitter, linkedin {
.#{$social}-icon {
  background-image: url('/images/#{$social}');
}
}

.body {
  //call the mixin, can also pass parameters here 
  //@include transitions(30sec);
  @include transitions;
}

//SASS based CSS to target elements
.media {
  overflow: hidden;
  margin-bottom: 1em;
  border-bottom: 1px solid $media-border;

@media screen and (min-width: 768px) {
  //media query that finds device dimensions and only applies CSS to those
  //dimensions, origentations, colors, aspect ratio, etc.
  //https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
  //checks for multiple media devices, can also be nested
  //background: $media-border; //place the abstract variable here
}

  //SASS formats of nested objects
  h2 {
    margin: 0;
    font-family: sans-serif;
  }
  
}

SassMeister-output.css

h1 {
  margin-border: 0;
  font-size: 16px;
}

h2 {
  margin-border: 0;
  font-size: 32px;
}

h3 {
  margin-border: 0;
  font-size: 48px;
}

h4 {
  margin-border: 0;
  font-size: 64px;
}

h5 {
  margin-border: 0;
  font-size: 80px;
}

h6 {
  margin-border: 0;
  font-size: 96px;
}

.facebook-icon {
  background-image: url("/images/facebook");
}

.twitter-icon {
  background-image: url("/images/twitter");
}

.linkedin-icon {
  background-image: url("/images/linkedin");
}

.body {
  transition: all 1s ease-out;
}
.csstransitions .body {
  backface-visibility: hidden;
}

.media {
  overflow: hidden;
  margin-bottom: 1em;
  border-bottom: 1px solid #7fdbff;
}
.media h2 {
  margin: 0;
  font-family: sans-serif;
}

SassMeister-rendered.html

<div class="media">

  <img class="media-src" src="http://lorempixel.com/200/200" alt="">
  <div class="media-text">
    <h2 class="media-heading">Media Heading</h2>
    <p> Text Content. lorem ipsum, etc.</p>
  </div>
  
</div>