Skip to content

Instantly share code, notes, and snippets.

@jonginn
Created August 20, 2014 11:20
Show Gist options
  • Select an option

  • Save jonginn/90d84766769479fba69f to your computer and use it in GitHub Desktop.

Select an option

Save jonginn/90d84766769479fba69f to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>
// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----
$color1: #3498db;
$color2: #27ae60;
@for $i from 1 through 10 {
table tr:nth-child(#{$i}){
td{
background-color:mix($color1, $color2, $i * 10);
}
}
}
table tr:nth-child(1) td {
background-color: #28ab6c;
}
table tr:nth-child(2) td {
background-color: #29a978;
}
table tr:nth-child(3) td {
background-color: #2aa784;
}
table tr:nth-child(4) td {
background-color: #2ca591;
}
table tr:nth-child(5) td {
background-color: #2da39d;
}
table tr:nth-child(6) td {
background-color: #2ea0a9;
}
table tr:nth-child(7) td {
background-color: #309eb6;
}
table tr:nth-child(8) td {
background-color: #319cc2;
}
table tr:nth-child(9) td {
background-color: #329ace;
}
table tr:nth-child(10) td {
background-color: #3498db;
}
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment