ngMaterial Layout SASS using selectors instead of attribute selectors

layout.scss

// Responsive attributes
// ------------------------------

// hide means hide everywhere
/* Sizes:
  0    <= size < 600  Phone
  600  <= size < 960  Tablet
  960  <= size < 1200 Tablet-Landscape
  1200 <= size         PC
*/

.layout {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.layout-column {
  flex-direction: column;
  -webkit-flex-direction: column;
}

.layout-row {
  flex-direction: row;
  -webkit-flex-direction: row;
}

.layout-padding > .flex-sm,
.layout-padding > .flex-lt-md
{
  padding: $layout-gutter-width / 4;
}
.layout-padding,
.layout-padding > .flex,
.layout-padding > .flex-gt-sm,
.layout-padding > .flex-md,
.layout-padding > .flex-lt-lg
{
  padding: $layout-gutter-width / 2;
}
.layout-padding > .flex-gt-md,
.layout-padding > .flex-lg
{
  padding: $layout-gutter-width / 1;
}


.layout-margin > .flex-sm,
.layout-margin > .flex-lt-md
{
  margin: $layout-gutter-width / 4;
}
.layout-margin,
.layout-margin > .flex,
.layout-margin > .flex-gt-sm,
.layout-margin > .flex-md,
.layout-margin > .flex-lt-lg {
  margin: $layout-gutter-width / 2;
}
.layout-margin > .flex-gt-md,
.layout-margin > .flex-lg
{
  margin: $layout-gutter-width / 1;
}



.layout-wrap {
  flex-wrap: wrap;
}

.layout-fill {
  margin: 0;
  min-height: 100%;
  width: 100%;
}
@-moz-document url-prefix() {
  .layout-fill {
    margin: 0;
    width: 100%;
    min-height: auto;
    height: inherit;
  }
}

@mixin flex-order-for-name($suffix: null) {
  $selector: 'flex-order';
  @if $suffix != null {
    $selector: 'flex-order-#{$suffix}';
  }
  .#{$selector}-0 { order: 0; }
  .#{$selector}-1 { order: 1; }
  .#{$selector}-2 { order: 2; }
  .#{$selector}-3 { order: 3; }
  .#{$selector}-4 { order: 4; }
  .#{$selector}-5 { order: 5; }
  .#{$selector}-6 { order: 6; }
  .#{$selector}-7 { order: 7; }
  .#{$selector}-8 { order: 8; }
  .#{$selector}-9 { order: 9; }
}

@mixin layout-for-name($name) {
  .layout-#{$name} {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .layout-#{$name}-column {
    flex-direction: column;
  }
  .layout-#{$name}-row {
    flex-direction: row;
  }
}

@mixin offset-for-name($name: null) {
  $offsetName: 'offset';
  @if $name != null {
    $offsetName: 'offset-#{$name}';
  }
  @for $i from 1 through 19 {
    .#{$offsetName}-#{$i * 5} {
      margin-left: #{$i * 5 + '%'};
    }
  }
  .#{$offsetName}-33, .#{$offsetName}-34 {
    margin-left: 33.33%;
  }
  .#{$offsetName}-66, .#{$offsetName}-67 {
    margin-left: 66.66%;
  }
}

@mixin flex-properties-for-name($name: null) {
  $flexName: 'flex';
  @if $name != null {
    $flexName: 'flex-#{$name}';
  }

  .#{$flexName} {
    box-sizing: border-box;
    flex: 1;
  }


  // (0-20) * 5 = 0-100%
  @for $i from 0 through 20 {
    .#{$flexName}-#{$i * 5} {
      flex: 0 0 #{$i * 5 + '%'};
    }
    .layout-row > .#{$flexName}-#{$i * 5} {
      max-width: #{$i * 5 + '%'};
    }
    .layout-column > .#{$flexName}-#{$i * 5} {
      max-height: #{$i * 5 + '%'};
    }
  }

  .#{$flexName}-33, .#{$flexName}-34 {
    flex: 0 0 33.33%;
  }
  .#{$flexName}-66, .#{$flexName}-67 {
    flex: 0 0 66.66%;
  }

  .layout-row {
    > .#{$flexName}-33, > .#{$flexName}-34 {
      max-width: 33.33%;
    }
    > .#{$flexName}-66, > .#{$flexName}-67 {
      max-width: 66.66%;
    }
  }
  .layout-column {
    > .#{$flexName}-33, > .#{$flexName}-34 {
      max-height: 33.33%;
    }
    > .#{$flexName}-66, > .#{$flexName}-67 {
      max-height: 66.66%;
    }
  }
}

// Alignment attributes for layout containers' children
// Arrange on the Main Axis
// center, start, end, space-between, space-around
// flex-start is the default for justify-content
// ------------------------------

@mixin layout-align-for-name($suffix: null) {
  $name: 'layout-align';
  @if $suffix != null {
    $name: 'layout-align-#{$suffix}';
  }

  // Main Axis Center
  .#{$name}-center, //stretch
  .#{$name}-center-center,
  .#{$name}-center-start,
  .#{$name}-center-end {
    justify-content: center;
  }

  // Main Axis End
  .#{$name}-end, //stretch
  .#{$name}-end-center,
  .#{$name}-end-start,
  .#{$name}-end-end {
    justify-content: flex-end;
  }

  // Main Axis Space Around
  .#{$name}-space-around, //stretch
  .#{$name}-space-around-center,
  .#{$name}-space-around-start,
  .#{$name}-space-around-end {
    justify-content: space-around;
  }

  // Main Axis Space Between
  .#{$name}-space-between, //stretch
  .#{$name}-space-between-center,
  .#{$name}-space-between-start,
  .#{$name}-space-between-end {
    justify-content: space-between;
  }


  // Arrange on the Cross Axis
  // center, start, end
  // stretch is the default for align-items
  // ------------------------------

  // Cross Axis Center
  .#{$name}-center-center,
  .#{$name}-start-center,
  .#{$name}-end-center,
  .#{$name}-space-between-center,
  .#{$name}-space-around-center {
    align-items: center;
  }

  // Cross Axis Start
  .#{$name}-center-start,
  .#{$name}-start-start,
  .#{$name}-end-start,
  .#{$name}-space-between-start,
  .#{$name}-space-around-start {
    align-items: flex-start;
  }

  // Cross Axis End
  .#{$name}-center-end,
  .#{$name}-start-end,
  .#{$name}-end-end,
  .#{$name}-space-between-end,
  .#{$name}-space-around-end {
    align-items: flex-end;
  }

}

// Flex attributes for layout children
// ------------------------------

@include flex-properties-for-name();
@include layout-align-for-name();
@include flex-order-for-name();
@include offset-for-name();

/**
 * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
 * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
 * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
 */

// SMALL SCREEN
@media (max-width: $layout-breakpoint-sm - 1) {
  .hide-sm, .hide {
    &:not(.show-sm):not(.show) {
      display: none;
    }
  }

  @include flex-order-for-name(sm);
  @include layout-align-for-name(sm);
  @include layout-for-name(sm);
  @include offset-for-name(sm);
  @include flex-properties-for-name(sm);
}

// BIGGER THAN SMALL SCREEN
@media (min-width: $layout-breakpoint-sm) {
  @include flex-order-for-name(gt-sm);
  @include layout-align-for-name(gt-sm);
  @include layout-for-name(gt-sm);
  @include offset-for-name(gt-sm);
  @include flex-properties-for-name(gt-sm);
}

// MEDIUM SCREEN
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
  .hide, .hide-gt-sm {
    &:not(.show-gt-sm):not(.show-md):not(.show) {
      display: none;
    }
  }
  .hide-md:not(.show-md):not(.show) {
    display: none;
  }

  @include flex-order-for-name(md);
  @include layout-align-for-name(md);
  @include layout-for-name(md);
  @include offset-for-name(md);
  @include flex-properties-for-name(md);
}

// BIGGER THAN MEDIUM SCREEN
@media (min-width: $layout-breakpoint-md) {
  @include flex-order-for-name(gt-md);
  @include layout-align-for-name(gt-md);
  @include layout-for-name(gt-md);
  @include offset-for-name(gt-md);
  @include flex-properties-for-name(gt-md);
}

// LARGE SCREEN
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
  .hide, .hide-gt-sm, .hide-gt-md {
    &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
      display: none;
    }
  }
  .hide-lg:not(.show-lg):not(.show) {
    display: none;
  }

  @include flex-order-for-name(lg);
  @include layout-align-for-name(lg);
  @include layout-for-name(lg);
  @include offset-for-name(lg);
  @include flex-properties-for-name(lg);
}

// BIGGER THAN LARGE SCREEN
@media (min-width: $layout-breakpoint-lg) {
  .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
    &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
      display: none;
    }
  }

  @include flex-order-for-name(gt-lg);
  @include layout-align-for-name(gt-lg);
  @include layout-for-name(gt-lg);
  @include offset-for-name(gt-lg);
  @include flex-properties-for-name(gt-lg);
}