Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="deploy-reloaded">

<table width="100%">
    <tbody>
        <tr class="ecom">
            <td><a href="">1231231</a></td>
        </tr>
        <tr class="ecom verizon">
            <td><a href="">12312312312</a></td>
        </tr>
        <tr class="site">
            <td><a href="">123123123</a></td>
        </tr>
        <tr class="samsung">
            <td><a href="">123123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123123123</a></td>
        </tr>
    </tbody>
</table>
  
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

#deploy-reloaded {
  font-family: "arial","helvetica", sans-serif;
  color: #fff;
  background-color: #000;
  line-height: 1.05;
  table {
    border-collapse: collapse;
    border: none;
    border-color: #666;
      width: 100%;
    th {
      padding: 4px 5px;
      text-align: right;
    }
    td {
      padding: 4px 5px;
      text-align: right;
      white-space: nowrap;
    }
    th {
      text-align: center;
    }
    tr td {
      &:first-child {
        white-space: normal;
        text-align: left;
      }
      a {
        color: rgb(255, 204, 0);
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  input {
    &[type="button"], &[type="submit"], &[type="reset"] {
      font-weight: bold;
      padding: 5px;
      border-radius: 4px;
    }
  }
  button {
    font-weight: bold;
    padding: 5px;
    border-radius: 4px;
  }
  td.disabled a {
    opacity: 0.2;
  }
  $lightenfactor: 20%;
  $basecolor: #000;

  tr {
    background-color: $basecolor;
    &:hover {
      background-color: lighten($basecolor, $lightenfactor);
    }
  }
  $color1: #000;

  $classes: ("verizon" #330000) ("samsung" rgb(0, 51, 0)) ('site' #030353) ('ecom' #422442);
  
  @each $class in $classes {
     $className: nth($class, 1);
     $color: nth($class, 2);
     $hoverColor: lighten($color, $lightenfactor);
     tr.#{$className} {
        background-color: $color;
        &:hover {
          background-color: $hoverColor;
        }
     }
  }
  @import "compass/css3/images";
  @each $class1 in $classes {
  @each $class2 in $classes {
     $className1: nth($class1, 1);
     $color1: nth($class1, 2);
     $hoverColor1: lighten($color1, $lightenfactor);
     $className2: nth($class2, 1);
     $color2: nth($class2, 2);
     $hoverColor2: lighten($color2, $lightenfactor);
     $mix: mix($color1, $color2);
     $mixHoverColor: lighten($mix, $lightenfactor);
     @if ($className1 != $className2) {
        tr.#{$className1}.#{$className2} {
          @include background-image(linear-gradient(left top, $color1, $color2));
          &:hover {
          @include background-image(linear-gradient(left top, $hoverColor1, $hoverColor2));
          }
        }
     }

  }
  }
  
  
}

SassMeister-output.css

#deploy-reloaded { font-family: "arial","helvetica", sans-serif; color: #fff; background-color: #000; line-height: 1.05; }
#deploy-reloaded table { border-collapse: collapse; border: none; border-color: #666; width: 100%; }
#deploy-reloaded table th { padding: 4px 5px; text-align: right; }
#deploy-reloaded table td { padding: 4px 5px; text-align: right; white-space: nowrap; }
#deploy-reloaded table th { text-align: center; }
#deploy-reloaded table tr td:first-child { white-space: normal; text-align: left; }
#deploy-reloaded table tr td a { color: #ffcc00; text-decoration: none; }
#deploy-reloaded table tr td a:hover { text-decoration: underline; }
#deploy-reloaded input[type="button"], #deploy-reloaded input[type="submit"], #deploy-reloaded input[type="reset"] { font-weight: bold; padding: 5px; border-radius: 4px; }
#deploy-reloaded button { font-weight: bold; padding: 5px; border-radius: 4px; }
#deploy-reloaded td.disabled a { opacity: 0.2; }
#deploy-reloaded tr { background-color: black; }
#deploy-reloaded tr:hover { background-color: #333333; }
#deploy-reloaded tr.verizon { background-color: #330000; }
#deploy-reloaded tr.verizon:hover { background-color: #990000; }
#deploy-reloaded tr.samsung { background-color: #003300; }
#deploy-reloaded tr.samsung:hover { background-color: #009900; }
#deploy-reloaded tr.site { background-color: #030353; }
#deploy-reloaded tr.site:hover { background-color: #0707b5; }
#deploy-reloaded tr.ecom { background-color: #422442; }
#deploy-reloaded tr.ecom:hover { background-color: #844884; }
#deploy-reloaded tr.verizon.samsung { background-image: linear-gradient(to right bottom, #330000, #003300); background-image: linear-gradient(to right bottom, #330000, #003300); background-image: linear-gradient(to right bottom, #330000, #003300); }
#deploy-reloaded tr.verizon.samsung:hover { background-image: linear-gradient(to right bottom, #990000, #009900); background-image: linear-gradient(to right bottom, #990000, #009900); background-image: linear-gradient(to right bottom, #990000, #009900); }
#deploy-reloaded tr.verizon.site { background-image: linear-gradient(to right bottom, #330000, #030353); background-image: linear-gradient(to right bottom, #330000, #030353); background-image: linear-gradient(to right bottom, #330000, #030353); }
#deploy-reloaded tr.verizon.site:hover { background-image: linear-gradient(to right bottom, #990000, #0707b5); background-image: linear-gradient(to right bottom, #990000, #0707b5); background-image: linear-gradient(to right bottom, #990000, #0707b5); }
#deploy-reloaded tr.verizon.ecom { background-image: linear-gradient(to right bottom, #330000, #422442); background-image: linear-gradient(to right bottom, #330000, #422442); background-image: linear-gradient(to right bottom, #330000, #422442); }
#deploy-reloaded tr.verizon.ecom:hover { background-image: linear-gradient(to right bottom, #990000, #844884); background-image: linear-gradient(to right bottom, #990000, #844884); background-image: linear-gradient(to right bottom, #990000, #844884); }
#deploy-reloaded tr.samsung.verizon { background-image: linear-gradient(to right bottom, #003300, #330000); background-image: linear-gradient(to right bottom, #003300, #330000); background-image: linear-gradient(to right bottom, #003300, #330000); }
#deploy-reloaded tr.samsung.verizon:hover { background-image: linear-gradient(to right bottom, #009900, #990000); background-image: linear-gradient(to right bottom, #009900, #990000); background-image: linear-gradient(to right bottom, #009900, #990000); }
#deploy-reloaded tr.samsung.site { background-image: linear-gradient(to right bottom, #003300, #030353); background-image: linear-gradient(to right bottom, #003300, #030353); background-image: linear-gradient(to right bottom, #003300, #030353); }
#deploy-reloaded tr.samsung.site:hover { background-image: linear-gradient(to right bottom, #009900, #0707b5); background-image: linear-gradient(to right bottom, #009900, #0707b5); background-image: linear-gradient(to right bottom, #009900, #0707b5); }
#deploy-reloaded tr.samsung.ecom { background-image: linear-gradient(to right bottom, #003300, #422442); background-image: linear-gradient(to right bottom, #003300, #422442); background-image: linear-gradient(to right bottom, #003300, #422442); }
#deploy-reloaded tr.samsung.ecom:hover { background-image: linear-gradient(to right bottom, #009900, #844884); background-image: linear-gradient(to right bottom, #009900, #844884); background-image: linear-gradient(to right bottom, #009900, #844884); }
#deploy-reloaded tr.site.verizon { background-image: linear-gradient(to right bottom, #030353, #330000); background-image: linear-gradient(to right bottom, #030353, #330000); background-image: linear-gradient(to right bottom, #030353, #330000); }
#deploy-reloaded tr.site.verizon:hover { background-image: linear-gradient(to right bottom, #0707b5, #990000); background-image: linear-gradient(to right bottom, #0707b5, #990000); background-image: linear-gradient(to right bottom, #0707b5, #990000); }
#deploy-reloaded tr.site.samsung { background-image: linear-gradient(to right bottom, #030353, #003300); background-image: linear-gradient(to right bottom, #030353, #003300); background-image: linear-gradient(to right bottom, #030353, #003300); }
#deploy-reloaded tr.site.samsung:hover { background-image: linear-gradient(to right bottom, #0707b5, #009900); background-image: linear-gradient(to right bottom, #0707b5, #009900); background-image: linear-gradient(to right bottom, #0707b5, #009900); }
#deploy-reloaded tr.site.ecom { background-image: linear-gradient(to right bottom, #030353, #422442); background-image: linear-gradient(to right bottom, #030353, #422442); background-image: linear-gradient(to right bottom, #030353, #422442); }
#deploy-reloaded tr.site.ecom:hover { background-image: linear-gradient(to right bottom, #0707b5, #844884); background-image: linear-gradient(to right bottom, #0707b5, #844884); background-image: linear-gradient(to right bottom, #0707b5, #844884); }
#deploy-reloaded tr.ecom.verizon { background-image: linear-gradient(to right bottom, #422442, #330000); background-image: linear-gradient(to right bottom, #422442, #330000); background-image: linear-gradient(to right bottom, #422442, #330000); }
#deploy-reloaded tr.ecom.verizon:hover { background-image: linear-gradient(to right bottom, #844884, #990000); background-image: linear-gradient(to right bottom, #844884, #990000); background-image: linear-gradient(to right bottom, #844884, #990000); }
#deploy-reloaded tr.ecom.samsung { background-image: linear-gradient(to right bottom, #422442, #003300); background-image: linear-gradient(to right bottom, #422442, #003300); background-image: linear-gradient(to right bottom, #422442, #003300); }
#deploy-reloaded tr.ecom.samsung:hover { background-image: linear-gradient(to right bottom, #844884, #009900); background-image: linear-gradient(to right bottom, #844884, #009900); background-image: linear-gradient(to right bottom, #844884, #009900); }
#deploy-reloaded tr.ecom.site { background-image: linear-gradient(to right bottom, #422442, #030353); background-image: linear-gradient(to right bottom, #422442, #030353); background-image: linear-gradient(to right bottom, #422442, #030353); }
#deploy-reloaded tr.ecom.site:hover { background-image: linear-gradient(to right bottom, #844884, #0707b5); background-image: linear-gradient(to right bottom, #844884, #0707b5); background-image: linear-gradient(to right bottom, #844884, #0707b5); }

SassMeister-rendered.html

<div id="deploy-reloaded">

<table width="100%">
    <tbody>
        <tr class="ecom">
            <td><a href="">1231231</a></td>
        </tr>
        <tr class="ecom verizon">
            <td><a href="">12312312312</a></td>
        </tr>
        <tr class="site">
            <td><a href="">123123123</a></td>
        </tr>
        <tr class="samsung">
            <td><a href="">123123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123123123</a></td>
        </tr>
        <tr>
            <td><a href="">123123123123</a></td>
        </tr>
    </tbody>
</table>
  
</div>