Generated by SassMeister.com.

SassMeister-input-HTML.html

<article>Test</article>

SassMeister-input.scss

// ----
// libsass (v3.3.6)
// ----

$grid-color: rgba(210, 105, 30, 0.5);
$gutter-color: rgba(210, 105, 30, 0.25);

//$grid-color: rgba(162, 0, 0, 0.5);
//$gutter-color: rgba(210, 105, 30, 0.25);

@mixin bg-grid() {
  background-image: linear-gradient(to right, $grid-color, $grid-color 6.38298%, 
  $gutter-color 6.38298%, $gutter-color 8.51064%, 
  $grid-color 8.51064%, $grid-color 14.89362%, 
  $gutter-color 14.89362%, $gutter-color 17.02128%, 
  $grid-color 17.02128%, $grid-color 23.40426%, 
  $gutter-color 23.40426%, $gutter-color 25.53191%, 
  $grid-color 25.53191%, $grid-color 31.91489%, 
  $gutter-color 31.91489%, $gutter-color 34.04255%, 
  $grid-color 34.04255%, $grid-color 40.42553%, 
  $gutter-color 40.42553%, $gutter-color 42.55319%, 
  $grid-color 42.55319%, $grid-color 48.93617%, 
  $gutter-color 48.93617%, $gutter-color 51.06383%, 
  $grid-color 51.06383%, $grid-color 57.44681%, 
  $gutter-color 57.44681%, $gutter-color 59.57447%, 
  $grid-color 59.57447%, $grid-color 65.95745%, 
  $gutter-color 65.95745%, $gutter-color 68.08511%, 
  $grid-color 68.08511%, $grid-color 74.46809%, 
  $gutter-color 74.46809%, $gutter-color 76.59574%, 
  $grid-color 76.59574%, $grid-color 82.97872%, 
  $gutter-color 82.97872%, $gutter-color 85.10638%, 
  $grid-color 85.10638%, $grid-color 91.48936%, 
  $gutter-color 91.48936%, $gutter-color 93.61702%, 
  $grid-color 93.61702%, $grid-color 100%);
}

body, html {
  height: 100%;
  width: 100%;
}
body {
  margin: 0;
  padding: 0;
  @include bg-grid();
}

article {
  width: 100%;
  height: 300px;
//    @include bg-grid();
}

SassMeister-output.css

body, html {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-image: linear-gradient(to right, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 6.38298%, rgba(210, 105, 30, 0.25) 6.38298%, rgba(210, 105, 30, 0.25) 8.51064%, rgba(210, 105, 30, 0.5) 8.51064%, rgba(210, 105, 30, 0.5) 14.89362%, rgba(210, 105, 30, 0.25) 14.89362%, rgba(210, 105, 30, 0.25) 17.02128%, rgba(210, 105, 30, 0.5) 17.02128%, rgba(210, 105, 30, 0.5) 23.40426%, rgba(210, 105, 30, 0.25) 23.40426%, rgba(210, 105, 30, 0.25) 25.53191%, rgba(210, 105, 30, 0.5) 25.53191%, rgba(210, 105, 30, 0.5) 31.91489%, rgba(210, 105, 30, 0.25) 31.91489%, rgba(210, 105, 30, 0.25) 34.04255%, rgba(210, 105, 30, 0.5) 34.04255%, rgba(210, 105, 30, 0.5) 40.42553%, rgba(210, 105, 30, 0.25) 40.42553%, rgba(210, 105, 30, 0.25) 42.55319%, rgba(210, 105, 30, 0.5) 42.55319%, rgba(210, 105, 30, 0.5) 48.93617%, rgba(210, 105, 30, 0.25) 48.93617%, rgba(210, 105, 30, 0.25) 51.06383%, rgba(210, 105, 30, 0.5) 51.06383%, rgba(210, 105, 30, 0.5) 57.44681%, rgba(210, 105, 30, 0.25) 57.44681%, rgba(210, 105, 30, 0.25) 59.57447%, rgba(210, 105, 30, 0.5) 59.57447%, rgba(210, 105, 30, 0.5) 65.95745%, rgba(210, 105, 30, 0.25) 65.95745%, rgba(210, 105, 30, 0.25) 68.08511%, rgba(210, 105, 30, 0.5) 68.08511%, rgba(210, 105, 30, 0.5) 74.46809%, rgba(210, 105, 30, 0.25) 74.46809%, rgba(210, 105, 30, 0.25) 76.59574%, rgba(210, 105, 30, 0.5) 76.59574%, rgba(210, 105, 30, 0.5) 82.97872%, rgba(210, 105, 30, 0.25) 82.97872%, rgba(210, 105, 30, 0.25) 85.10638%, rgba(210, 105, 30, 0.5) 85.10638%, rgba(210, 105, 30, 0.5) 91.48936%, rgba(210, 105, 30, 0.25) 91.48936%, rgba(210, 105, 30, 0.25) 93.61702%, rgba(210, 105, 30, 0.5) 93.61702%, rgba(210, 105, 30, 0.5) 100%);
}

article {
  width: 100%;
  height: 300px;
}

SassMeister-rendered.html

<article>Test</article>