sass-mixin-with-default.scss

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

$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;

@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};
}

@mixin two_column {
  float: left;
  padding: $ten;
  width: 430/960*100;
}

@mixin clear {
  clear:both;
}
.container {
   width: 960px;
   margin: 0 auto;
   padding: $padding;
   color: $Color2;
   
   h1 {
     font-size: $FontSize*3;
     padding: $ten+10;
     color: $Color1;
     border: $border;
     text-align: center;
     @include radius(10px);
   }
   
   h2 {
    font-size: $FontSize*2; 
    span {
      font-style: italic;
       &:before {
         content: '- ';
       }
    }
     &:after {
       content: $StringVar;
     }
   }
   
   #mypara {
     color: $Color1;
     @include two_column;
   }
   
   #mypara1 {
    @include two_column;
   }
  
   .footer {
      color: $Color1;
      border: $border;
      text-align: center;
      @include radius;
      @include clear;
      p {
       font-size: $FontSize/1.5; 
      }
   }
}