Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class = "testDiv">TEST</div>
<div id ="region-branding"></div>
<div class ="block">
</div>
<div class ="block"></div>
<div class ="block"></div>
<div class ="block"></div>
<div class ="block"></div>

SassMeister-input.sass

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----


@import "compass"
$red: red
$site-gray: #333
$value: 33%

=linear-gradient($fromColor, $toColor) 
  background-color: $toColor
  background-image: -webkit-gradient(linear, left top, left bottom, from($fromColor), to($toColor))
  background-image: -webkit-linear-gradient(top, $fromColor, $toColor)
  background-image:    -moz-linear-gradient(top, $fromColor, $toColor)
  background-image:     -ms-linear-gradient(top, $fromColor, $toColor)
  background-image:      -o-linear-gradient(top, $fromColor, $toColor) 
  background-image:         linear-gradient(top, $fromColor, $toColor)
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$fromColor', EndColorStr='$toColor')

 


#region-branding
  height: 140px
  +background-image(linear-gradient(white, white 90%, #f3f3f3))
 
.block  + .block
  +linear-gradient(black, white)
  margin: 10px
  height: 30px
  width: 30px

SassMeister-output.css

#region-branding {
  height: 140px;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #f3f3f3));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 90%, #f3f3f3);
  background-image: -moz-linear-gradient(#ffffff, #ffffff 90%, #f3f3f3);
  background-image: -o-linear-gradient(#ffffff, #ffffff 90%, #f3f3f3);
  background-image: linear-gradient(#ffffff, #ffffff 90%, #f3f3f3);
}

.block + .block {
  background-color: white;
  background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(white));
  background-image: -webkit-linear-gradient(top, black, white);
  background-image: -moz-linear-gradient(top, black, white);
  background-image: -ms-linear-gradient(top, black, white);
  background-image: -o-linear-gradient(top, black, white);
  background-image: linear-gradient(top, #000000, #ffffff);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$fromColor', EndColorStr='$toColor');
  margin: 10px;
  height: 30px;
  width: 30px;
}

SassMeister-rendered.html

<div class = "testDiv">TEST</div>
<div id ="region-branding"></div>
<div class ="block">
</div>
<div class ="block"></div>
<div class ="block"></div>
<div class ="block"></div>
<div class ="block"></div>