从子 scss 调用父

Question

我有<td>，里面还有<a>。

例如

<td>
     <a>test</a>
</td>
<td>

</td>

起初<td>只有<a>。其余没有<a>。 我的要求是悬停时突出显示 <td> 标记 <a>。

所以只有第一个 td 会在悬停时改变突出显示。

我的代码=>

td{
      
      $this:&;

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

但此代码无效。我错过了什么？

Answer 1

由于 CSS 中没有父选择器，您有 2 个可行的选择。

在包含锚元素的 TD 上使用 class 名称
使用 link 的 &::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;
  }
}

我设置了一个 JSFiddle 演示：https://jsfiddle.net/robertp/409un7hf/

从子 scss 调用父

Call parent from child scss

sass

parent-selector