1-layout-variables.scss

$breakpoints: (
  small:         0,   // Phones, watches, ...
  narrow:      640px, // Portrait oriented tablets
  normal:      980px, // Landscape oriented tablets, laptops, smaller desktop screens, ...
  wide:       1200px  // Large desktop screens, TVs, ...
);
@function breakpoint-size($key, $max-width: false) {
  @if ($max-width) {
    @return map-get($breakpoints, $key) - 1
  }
  @return map-get($breakpoints, $key);
}

$__site-width-default: 95%;
$__site-width-max: breakpoint-size(normal) - 20px;
$site-width: (
  default: $__site-width-default,
  small:   $__site-width-default,
  narrow:  $__site-width-default,
  normal:  $__site-width-max,
  wide:    $__site-width-max
) !default;
@function site-width($key) {
  @return map-get($site-width, $key);
}

2-layout-mixins.scss

// Susy container.
@mixin container-length() {
  @include container(site-width(small));

  @include breakpoint(breakpoint-size(narrow)) {
    @include container(site-width(narrow));
  }
  @include breakpoint(breakpoint-size(normal)) {
    @include container(site-width(normal));
  }
  @include breakpoint(breakpoint-size(wide)) {
    @include container(site-width(wide));
  }
}

//
// At
//
// Use it only with classes which contains '@' character.
// Examples:
//   .header@small
//   .header@narrow
//   .header@normal
//
// .header {
//   // Small to narrow screens.
//   @include at(&, small, narrow) {
//     float: right;
//   }
//   @include at(&, narrow) {
//     float: left;
//   }
//   @include at(&, normal) {
//     float: none;
//   }
// }
//
@mixin at($selector, $breakpoint-start, $breakpoint-end: false) {
  @if $breakpoint-end {
    @include breakpoint(breakpoint-size($breakpoint-start) breakpoint-size($breakpoint-end, true)) {
      @at-root #{$selector}\@#{$breakpoint-start} {
        @content;
      }
    }
  }
  @else {
    @include breakpoint(breakpoint-size($breakpoint-start)) {
      @at-root #{$selector}\@#{$breakpoint-start} {
        @content;
      }
    }
  }
}

3-layout-page.scss

%clearfix {
  @include clearfix();
}

%l-container {
  @include container-length()
}

.l-page-container {
  @extend %l-container;
  @extend %clearfix;
}

.header__branding {
  @include at(&, small, narrow) {
    text-align: center;

    @at-root .header__two--has-banner & {
      margin-bottom: 10px;
    }
  }
  @include at(&, narrow) {
    float: left;
  }
}

.header__banner {
  @include at(&, small, narrow) {
    text-align: center;
  }
  @include at(&, narrow) {
    float: right;
  }
}