background-build

background-build.scss

@mixin background-build($columns, $gutters, $gutter-styles, $color) {
  $Background-Map: background-map($columns, $gutters, $gutter-styles);
  $Display: true;

  $Column-Color: $color;
  $Inverse-Column-Color: mix(black, $color, 15%) + unquote("");
  $Gutter-Color: mix(white, $color, 25%) + unquote("");

  $Inverse-Column-Color: if(str-index($Inverse-Column-Color, '#'), '%23' + str-splice($Inverse-Column-Color, 2), $Inverse-Column-Color);
  $Gutter-Color: if(str-index($Gutter-Color, '#'), '%23' + str-splice($Gutter-Color, 2), $Gutter-Color);



  $Direction: named-direction(sgs-get('direction'));

  @each $bkpt, $def in $Background-Map {
    $Grid: map-get($def, 'grid');
    $Gutter: map-get($def, 'gutter');
    $Style: map-get($def, 'style');

    $Grid-Count: column-count($Grid);

    $SVG: "%3Csvg xmlns='http://www.w3.org/2000/svg'%3E";

    $Gutter-Width: gutter-span($Gutter, $Grid, $Style);
    @if unit($Gutter-Width) != '%' and unit($Gutter-Width) != '' {
      $Gutter-Width: 0%;
    }

    @if $Style == 'fixed' {
      $Gutter-Width: 0%;
    }
    $Counter-Width: 0%;
    $holder: ();

    @for $i from 1 through $Grid-Count {
      $Holder-Gradient: ();
      $Loop-Width: column-span(1, $i, $Grid, $Gutter, $Style);

      @if index($Style, 'split') and $i == 1 {
        $Counter-Width: ($Gutter-Width / 2);
        $SVG: $SVG + "%3Crect x='#{$Counter-Width}' fill='#{$Gutter-Color}' width='#{$Gutter-Width / 2}' height='100%'/%3E";
      }

      $Loop-Color: $Column-Color;
      @if (index($Style, 'fixed') or $Gutter-Width == 0%) and ($i % 2 == 0 ) {
        $Loop-Color: $Inverse-Column-Color;
      }

      @if $i != $Grid-Count {
        @if unit($Counter-Width) == unit($Loop-Width) {
          $SVG: $SVG + "%3Crect x='#{$Counter-Width}' fill='#{$Loop-Color}' width='#{$Loop-Width}' height='100%'/%3E";
          $Counter-Width: $Counter-Width + $Loop-Width;
          $SVG: $SVG + "%3Crect x='#{$Counter-Width}' fill='#{$Gutter-Color}' width='#{$Gutter-Width}' height='100%'/%3E";
          $Counter-Width: $Counter-Width + $Gutter-Width;
        }
        @else {
          $Display: false;
        }

      }
      @else if $i == 1 {
        @if unit($Counter-Width) == unit($Loop-Width) {
          $SVG: $SVG + "%3Crect x='#{$Counter-Width}' fill='#{$Loop-Color}' width='#{$Loop-Width}' height='100%'/%3E";
          $SVG: $SVG + "%3Crect x='#{$Loop-Width}' fill='#{$Gutter-Color}' width='#{$Gutter-Width}' height='100%'/%3E";
          $Counter-Width: $Counter-Width + $Loop-Width + $Gutter-Width;
        }
        @else {
          $Display: false;
        }

      }
      @else if $i == $Grid-Count and index($Style, 'split') {
        @if unit($Counter-Width) == unit($Loop-Width) {
          $SVG: $SVG + "%3Crect x='#{$Counter-Width}' fill='#{$Loop-Color}' width='#{$Loop-Width}' height='100%'/%3E";
          $Counter-Width: $Counter-Width + $Loop-Width;
          $SVG: $SVG + "%3Crect x='#{$Counter-Width}' fill='#{$Gutter-Color}' width='#{$Gutter-Width / 2}' height='100%'/%3E";
        }
        @else {
          $Display: false;
        }
      }
      @else {
        $SVG: $SVG + "%3Crect x='#{$Counter-Width}' fill='#{$Loop-Color}' width='#{$Loop-Width}' height='100%'/%3E";
      }
    }

    $SVG: $SVG + "%3C/svg%3E";
    
    @if $Display {

      @if $bkpt != -1px {
        @include breakpoint($bkpt) {
          background-image: url('data:image/svg+xml;charset=utf8,' + $SVG);
        }
      }
      @else {
        background-image: url('data:image/svg+xml;charset=utf8,' + $SVG);
      }
    }
    @else {
      @warn 'Cannot generate a Background Grid for grid `#{$Grid}` with gutters `#{$Gutter}` and gutter style `#{$Style}`';
    }
  }
}