cssgrid-area.scss

/// Generate Coordinates based on Grid Matrix and the selected area
///
/// @group core - cssgrid
///
/// @param   {string}  $area - Name of the Area
/// @param   {map}     $map - Map of your grid area matrix
/// @param   {bool}    $columnGap - If you use Gap for Columns
/// @param   {bool}    $rowGap - If you use Gap for Rows
///
/// @example scss - scss
///    $gridAreaMap: (
///      row1: ('logo', 'nav', 'nav', 'nav'),
///      row2: ('logo', 'empty', 'search', 'search')
///    );
///    @include grid-area(logo, $gridAreaMap, true);
@mixin grid-area($area, $map, $columnGap: false, $rowGap: false) {
  // Init Vars
  $gridColumnStart: '';
  $gridColumnEnd: '';
  $gridRows: ();
  $gridRowHeight: '';
  $areaExists: 0;

  // Output regular Area
  grid-area: $area;

  // Generate Old Spec Coordinates based on Area
  .old-grid-spec & {
    // Get Width element
    @for $i from 1 through length($map) {
      @if sl-contain(map-get($map,row#{$i}), $area) {
        $areaExists: append($areaExists, 1);
        $gridRowHeight: append($gridRowHeight, $i);
        $gridColumnStart: index(map-get($map,row#{$i}), $area);
        $gridColumnEnd: sl-last-index(map-get($map,row#{$i}), $area);
        $gridRows: append($gridRows, $i);
      }
    }

    // If Area exists in the Map
    @if length($areaExists) > 1 {
      // Convert Coordinate if Column Gap is active
      @if $columnGap {
        -ms-grid-column: $gridColumnStart + ($gridColumnStart - 1);
        -ms-grid-column-span: $gridColumnEnd - $gridColumnStart + 1 + ($gridColumnEnd - $gridColumnStart);

      } @else {
        -ms-grid-column: $gridColumnStart;
        -ms-grid-column-span: $gridColumnEnd - $gridColumnStart + 1;
      }

      // Add Row Coordinates
      @if $rowGap {
        -ms-grid-row: nth($gridRows,1) + (nth($gridRows,1) - 1);
        -ms-grid-row-span: length($gridRowHeight) - 1 + (length($gridRowHeight) - 2);

      } @else {
        -ms-grid-row: nth($gridRows,1);
        -ms-grid-row-span: length($gridRowHeight) - 1;
      }
    }
  }
}