Assuming that you want the border on the img
elements...
Sass (I pulled some of the properties and the opacity on the :hover
out of the loop as it was producing redundant CSS)
$yell: #FF0;
$ltred: #F00;
$dkblue: #00F;
$ltblue: #AAF;
$dkbrown: #880;
$ltbrown: #AA0;
$colors: $yell, $ltred, $dkblue, $ltblue, $dkbrown, $ltbrown;
@for $i from 1 through length($colors) {
#newsTiles .col-sm-5:nth-of-type(#{length($colors)}n+#{$i}) a .newsTile {
border-color: nth($colors, $i);
}
}
#newsTiles .col-sm-5 a {
.newsTile {
border-width:6px 0 0 0;
border-style:solid;
}
&:hover .newsTile {
opacity: 0.7;
}
}
Compiled CSS
#newsTiles .col-sm-5:nth-of-type(6n+1) a .newsTile {
border-color: yellow;
}
#newsTiles .col-sm-5:nth-of-type(6n+2) a .newsTile {
border-color: red;
}
#newsTiles .col-sm-5:nth-of-type(6n+3) a .newsTile {
border-color: blue;
}
#newsTiles .col-sm-5:nth-of-type(6n+4) a .newsTile {
border-color: #aaaaff;
}
#newsTiles .col-sm-5:nth-of-type(6n+5) a .newsTile {
border-color: #888800;
}
#newsTiles .col-sm-5:nth-of-type(6n+6) a .newsTile {
border-color: #aaaa00;
}
#newsTiles .col-sm-5 a .newsTile {
border-width: 6px 0 0 0;
border-style: solid;
}
#newsTiles .col-sm-5 a:hover .newsTile {
opacity: 0.7;
}