Contents

// Write stops for single columns
@function grid-gradient-stop($location, $columns, $gutter, $color) {
  @if $location == 1 {
    @return $color 0%, $color column-span(1, 1, $columns), transparentize($color, 1) column-span(1, 1, $columns);
  }
  @if $location == column-count($columns) {
    @return transparentize($color, 1) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color 100%;
  }
  @if $location > 1 {
    @return transparentize($color, 1) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location, 1, $columns), transparentize($color, 1) column-span($location, 1, $columns);
  }
}

// Compiling grid stops
@function grid-gradient-stops($columns, $gutter, $color) {
  $list: ();
  @for $i from 1 through column-count($columns) {
    $list: join($list, grid-gradient-stop($i, $columns, $gutter, $color), comma);
  }
  @return $list;
}

// Pull in grid stops to make a background gradient
@mixin background-grid($columns: false, $gutter: false, $color: rgba(#69aedb, 0.5)) {
  $gl: length($grids);
  
  @if $gl == 0 {
    $columns: find-grid($columns);
    $gutter: find-gutter($gutter);
    @include background(linear-gradient(left, grid-gradient-stops($columns, $gutter, $color)));
  }
  @else {
    @for $i from 1 through $gl {
      @if $i == 1 {
        $grid: nth($grids, 1);
        $gutter: find-gutter($gutter);
        @include background(linear-gradient(left, grid-gradient-stops($grid, $gutter, $color)));
      }
      @else {
        $grid: nth(nth($grids, $i), 1);
        $mq: nth(nth($grids, $i), 2);
        @include breakpoint($mq) {
          $gutter: find-gutter($gutter);
          @include background(linear-gradient(left, grid-gradient-stops($grid, $gutter, $color)));
        }
      }
    }
  }
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
singularitygs-1.0.alpha.2	stylesheets/singularitygs/_background-grid.scss
singularitygs-1.0.alpha.1	stylesheets/singularitygs/_background-grid.scss
singularitygs-1.0.alpha.0	stylesheets/singularitygs/_background-grid.scss