SCSS crash course; aka – collection of existing sources used as a reminder for myself, and perhaps some random dude…

$settings: (
    maxWidth: 800px,
    columns: 4,
    margin: 15px,
    breakpoints: (
        xs: "(max-width : 480px)",
        sm: "(max-width : 768px) and (min-width: 481px)",
        md: "(max-width : 1024px)  and (min-width: 769px)",
        lg: "(min-width : 1025px)"
    )   
);

@mixin renderGrid($key, $settings, $default: "xyz") {
    @if $key {
        $key: "xs";
    } @else {
        // ...
    }
    
  $i: 1;
  @while $i <= map-get($settings, "columns") {
    .col-#{$key}-#{$i} {
      float: left;
      width: 100% * $i / map-get($settings,"columns");
    }
    $i: $i+1;
  }
};

@include renderGrid("lg", $settings);

.container {
    padding-right: map-get($settings, "margin");
    padding-left: map-get($settings, "margin");
    margin-right: auto;
    margin-left: auto;
};

.row {
    margin-right: map-get($settings, "margin") * -1;
    margin-left: map-get($settings, "margin") * -1;
};


// ------------------------ @mixin ...
@mixin padding($values) {    
    @each $var in $values {
        padding: #{$var};
    }
}
// @include padding(2px 4px 6px);
// @include padding($values...);

$style1: 100%, 70px, #fo6d06;
$style2: (background: #bada55, width: 100%, height: 100px);
@mixin box($width, $height, $background) {
    width: $width;
    height: $height;
    background-color: $background;
}

.badass {
    @include box($style1...);
    @include box($style2...);
}

// -------------------------------- @content
@mixin apply-to-ie6-only {
  * html {
    @content
  }
}

@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

@mixin media($width) {
  @mediaX only screen and (max-width: $width) {
    @content
  }
}

@include media(320px) {
  background: red;
}

/* ------------------------- keyframes */

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }

  @-moz-keyframes #{$name} {
    @content;
  }

  @keyframes #{$name} {
    @content;
  }
}

@include keyframes(fadeIn) {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

/* -------------------- header ----------------*/

@mixin create-context($classes...) {
  @each $class in $classes {
    .#{$class} & {
      @content;
    }
  }
}

@mixin context--alternate-template {
  @include create-context(about, blog) {
    @content
  }
}


.header {
  height: 12em;
  background: red;

  @include context--alternate-template {
    background: green;
  }
}

/* ---------------------- placeholder ----------------- */
%button {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
%twitter-background {
  color: #fff;
  background: #55acee;
}
%facebook-background {
  color: #fff;
  background: #3b5998;
}

.btn {
  &--twitter {
    @extend %button;
    @extend %twitter-background;
  }
  &--facebook {
    @extend %button;
    @extend %facebook-background;
  }
}

/* --------------------- extend -------------------------*/

.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend .icon;
  /* error specific styles... */
}

.info-icon {
  @extend .icon;
  /* info specific styles... */
}