Code from PDX Sass demo given February 2014.

PDXSass_0214.scss

///////////////////////////////////
/// Major Features of Sass 3.3
///////////////////////////////////


// @at-root

.widget {
  @at-root .body {
    background: red;
  }
  @at-root {
    .header {
      color: green;
    }
    .footer {
      color: blue;
    }
  }
}


.widget {
  @media (min-width: 400px) {
    float: left;
    @supports (display:flex) {
      display: flex;
      @at-root(with: media) { // media rule supports
        img {
          display: block;
        }
      }
    }
  }
}



// New & functionality
  http://sassmeister.com/gist/8882732

/////////////
// maps


$colors: (
  primary: blue,
  secondary: red,
  tertiary: green,
  );
$break-points: (
  small: 500px,
  medium: 800px,
  large: 1100px,
  );
$navigation: (
  background: blue,
  color: green,
  line-height: 1.3,
  );

div {
  @media (min-width: map-get($break-points, medium)){
    color: map-get($colors, primary);
  }
}

header {
  background: map-get($navigation, background);
  color: map-get($navigation, color);
  line-height: map-get($navigation, line-height);
}


/////////////////////////////



$colors: (
  primary: blue,
  secondary: red,
  tertiary: green,
  );

@function g($map, $key) {
  @return map-get($map, $key);
}

div {
  color: g($colors, primary);
}


//////////////////////////

$navigation: (
  background: blue,
  color: green,
  line-height: 1.3,
  );

@mixin print-styles($map){
  @each $property, $value in $map {
    #{$property}: $value;
  }
}

div {
  @include print-styles($navigation);
}

/////////////


$colors: (
  primary: blue,
  secondary: red,
  tertiary: green,
  );

$break-points: (
  small: 500px,
  medium: 800px,
  large: 1100px,
  );

@function g($map, $key, $unit: px) {
  $value: map-get($map, $key);
  @if type-of($value) == number {
    @if $unit == unit($value) {
      @return $value;
    }
    @else {
      @return $value / 16px + em;
    }
  }
  @else {
     @return $value;
  }
}

div {
  @media (min-width: g($break-points, large, px)) {
    background: g($colors, primary);
  }
}



///////////////////////////////////
/// Misc New Features
///////////////////////////////////




//// determine list seperator

$a-list: a b c d e;
$another-list: 1, 2, 3, 4, 5;

div {
  a-list: list-separator($a-list);
  another-list: list-separator($another-list);
}

//// set-nth in a list
$a-list: a b c d e;
$another-list: 1, 2, 3, 4, 5;

$a-third-list: set-nth($a-list, 5, f);

div {
  a-third-list: $a-third-list;
}


/////////// Negative nth

$a-list: a b c d e;

div {
  test: nth($a-list, 1);
}


///////////  get a unique ID


div {
  test: unique-id();
  test: unique-id();
  test: unique-id();
}


/////////// Function via Call function


$a-list: a b c d e;

div {
  $function: nth;
  $list: $a-list;
  $number: 2;
  test: call($function, $list , $number);
}

////////////// testing for vars functions and mixins

$var: 10;
$global-var: 20;
@function a-function(){
  @return "hello world";
}
@mixin a-mixin() {
  background: blue;
}

div {
  var: variable-exists(var);
  global-var: global-variable-exists(global-var);
  function: function-exists(a-function);
  mixin: mixin-exists(a-mixin);
}