Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class='container'>

  <h1>SASS - @extend</h1>
  <h2><span>Basic</span> - Getting Started</h2>

  <p id='mypara'>Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor <br>
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi</p>
 
   
  <p id='mypara1'>Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi</p>
   
  <div class='footer'>
    <p>&copy; Copyright</p>
  </div>
 </div><!--container-->

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

/* 
 * LESS Variables are defined with an @ character
 * and can have different kinds of data types: 
 *  color, string, boolean, multi-value
 */
 
$Color1: navy;                            // named color value
$Color2: #333333;                         // hex color value
$StringVar: " with Sass";                 // string variable 
$FontSize: 18px;                          // numeric value
$border: 1px solid $Color2;              // multi-value variable
$padding: 15px 15px 15px 15px;           // multi-value variable
$ten: 10px;
$twenty: 10px;

@mixin radius ($radius:10px) {
  -webkit-border-radius:$radius;
 -moz-border-radius: $radius;
 -o-border-radius: $radius;
 -ms-border-radius: $radius;
 border-radius: $radius;
}

@mixin box-shadow($left:0, $top:2px, $blur:2px, $color:#000, $inset:"") {
  -webkit-box-shadow:$left $top $blur $color #{$inset};
  -moz-box-shadow:$left $top $blur $color #{$inset};
  -o-box-shadow:$left $top $blur $color #{$inset};
  -ms-box-shadow:$left $top $blur $color #{$inset};
  box-shadow:$left $top $blur $color #{$inset};
}

.common {
  color: $Color1;
  border: $border;
  text-align: center;
  @include radius;
}

.col-2 {
  float: left;
  padding:$ten;
  width: 430/960*100%;
}
.clear {
  clear:both;
}
.container {
   width: 960px;
   margin: 0 auto;
   padding: $padding;
   color: $Color2;
   
   h1 {
     font-size: $FontSize*2.5;
     padding: $ten+10;
     @extend .common;
     @include radius(40px);
     @include box-shadow(5px, 5px, 5px, $Color1);
   }
   
   h2 {
    font-size: $FontSize*2; 
    span {
      font-style: italic;
       &:before {
         content: '- ';
       }
    }
     &:after {
       content: $StringVar;
     }
   }
   
     #mypara {
     color: $Color1;
     @extend .col-2;
   }
   
   #mypara1 {
    @extend .col-2;
   }
  
  
   .footer {
      @extend .clear;
      @extend .common;
      p {
       font-size: $FontSize/1.5; 
      }
   }
}

SassMeister-output.css

/* 
 * LESS Variables are defined with an @ character
 * and can have different kinds of data types: 
 *  color, string, boolean, multi-value
 */
.common, .container h1, .container .footer {
  color: navy;
  border: 1px solid #333333;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

.col-2, .container #mypara, .container #mypara1 {
  float: left;
  padding: 10px;
  width: 44.79167%;
}

.clear, .container .footer {
  clear: both;
}

.container {
  width: 960px;
  margin: 0 auto;
  padding: 15px 15px 15px 15px;
  color: #333333;
}
.container h1 {
  font-size: 45px;
  padding: 20px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -o-border-radius: 40px;
  -ms-border-radius: 40px;
  border-radius: 40px;
  -webkit-box-shadow: 5px 5px 5px navy ;
  -moz-box-shadow: 5px 5px 5px navy ;
  -o-box-shadow: 5px 5px 5px navy ;
  -ms-box-shadow: 5px 5px 5px navy ;
  box-shadow: 5px 5px 5px navy ;
}
.container h2 {
  font-size: 36px;
}
.container h2 span {
  font-style: italic;
}
.container h2 span:before {
  content: '- ';
}
.container h2:after {
  content: " with Sass";
}
.container #mypara {
  color: navy;
}
.container .footer p {
  font-size: 12px;
}

SassMeister-rendered.html

<div class='container'>

  <h1>SASS - @extend</h1>
  <h2><span>Basic</span> - Getting Started</h2>

  <p id='mypara'>Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor <br>
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi</p>
 
   
  <p id='mypara1'>Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi</p>
   
  <div class='footer'>
    <p>&copy; Copyright</p>
  </div>
 </div><!--container-->