Sass 从子SCS调用父SCS

我有

，里面也有

例如

---

但是这个代码不起作用。我缺少什么？

因为CSS中没有父选择器，所以您有两个可行的选项

在包含锚元素的TD上使用类名

使用链接的&：：after伪元素应用样式

方案一更加灵活，提供了更多的可能性

SCSS代码：

$col-blue: blue;
$col-yellow: yellow;

td {
  position: relative;
  padding: 10px;
  border: 1px solid $col-blue;

  // Option 1 - uses td for hover and pseudo element for styling
  &>a {
    &::after {
      content: "";
      position: absolute;
      display: none;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: $col-blue;
      z-index: -1;
    }
  }

  &:hover {
    &>a {
      color: $col-yellow;

      &::after {
        display: block;
      }
    }
  }
}

// Option 2 - apply class name to TD with link
.td-with-link {
  &:hover {
    color: $col-yellow;
    background: $col-blue;
  }
}

---

我设置了一个JSFIDLE演示：

这是否回答了您的问题@Arkellys，我已经试过has（），但没有用。@Loran:

has（）

仍然是“选择器4级工作草案”的一部分，这意味着：它计划在未知的将来有时引入。。。这意味着您可以在项目中使用它，因为浏览器支持大约在它推出两年后（如果！）。您可以检查自己的支持：。你介意推荐的JS解决方案有什么原因吗？@Loran我的答案能解决你的问题吗？@robertp，谢谢你的回答，看起来你的答案是有效的，但我还没有用我的代码进行测试。我以后再回答。再次感谢你。

td{
      
      $this:&;

      &:hover {
        a {          
          #{$this} & {
            background-color: blue;
          }
        }
      }
    } 

$col-blue: blue;
$col-yellow: yellow;

td {
  position: relative;
  padding: 10px;
  border: 1px solid $col-blue;

  // Option 1 - uses td for hover and pseudo element for styling
  &>a {
    &::after {
      content: "";
      position: absolute;
      display: none;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: $col-blue;
      z-index: -1;
    }
  }

  &:hover {
    &>a {
      color: $col-yellow;

      &::after {
        display: block;
      }
    }
  }
}

// Option 2 - apply class name to TD with link
.td-with-link {
  &:hover {
    color: $col-yellow;
    background: $col-blue;
  }
}