Loops 子元素的Sass循环-选择img标记

我试图选择新闻文章网格中的每个img标记，并使用SASS中的循环在不同颜色的顶部添加边框。在子元素是更直接的子元素的其他情况下，我也可以这样做，但我似乎无法获得一种语法，在这种情况下，我的img标记嵌套在节中的元素中

这是我的HTML

这是我的俏皮话

/* News Tiles */
//## Looping through nth child to set border top color

$colors: $yell, $ltred, $dkblue, $ltblue, $dkbrown, $ltbrown;

@for $i from 1 through length($colors) {
  #newsTiles  div.col-sm-5 .newsTile:nth-of-type(#{length($colors)}n+#{$i}) {
    border-color: nth($colors, $i);
    border-width:6px 0 0 0;
    border-style:solid;
    &:hover{
      opacity: 0.7;
    }
  }
}

---

假设您想要img元素上的边框

Sass我将：hover上的一些属性和不透明度从循环中拉了出来，因为它正在生成冗余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;
  }
}

编译CSS

新闻磁砖.col-sm-5:nth-of-type6n+1A.新闻磁砖{ 边框颜色：黄色； } 新闻磁砖.col-sm-5:nth-of-type6n+2A.新闻磁砖{ 边框颜色：红色； } 新闻磁砖.col-sm-5:nth-of-type6n+3A.新闻磁砖{ 边框颜色：蓝色； } 新闻磁砖.col-sm-5:nth-of-type6n+4A.新闻磁砖{ 边框颜色：aaaaff； } 新闻磁砖.col-sm-5:nth-of-type6n+5A.新闻磁砖{ 边框颜色：888800； } 新闻磁砖.col-sm-5:nth-of-type6n+6A.新闻磁砖{ 边框颜色：aaaa00； } 新闻贴。col-sm-5 a。新闻贴{ 边框宽度：6px0； 边框样式：实心； } 新闻贴。col-sm-5a：悬停。新闻贴{ 不透明度：0.7； }

---

它是Sass而不是Sass grr。您是否尝试查看css得到的输出？如果你找不到css文件，那么在线转换器可能更容易发现问题所在！是的，你的解释很有用！我知道我现在错在哪里了。我没有想到将我在newsTile img之后的元素的选择器放在select？之后？？我的循环语句。我想基于Sass逻辑，在mixin中放置一个辅助选择器是有意义的。谢谢你的帮助！