SASS - 父母

Question

我试图将我的代码尽可能保持干净。考虑这个例子：

#parent {
  position: relative;

  #child {
    position: absolute;
    top: 0;
    left: 0;  
  }
}

现在我想在#parent上添加一个悬停效果，它会改变#child。我知道我可以这样做：

#parent {
  position: relative;

  #child {
    position: absolute;
    top: 0;
    left: 0;   
  }

  &:hover #child {
    transform: scale(1.2, 1.2);
  }
}

但我对此解决方案不满意。它不是完全干的，因为#child被声明了两次。另一种方法是这样的：

#parent {
  position: relative;
}

#child {
  position: absolute;
  top: 0;
  left: 0;

  #parent:hover & {
    transform: scale(1.2, 1.2);
  }  
}

这可以说更具语义性，但不再是DRY，因为#parent被声明了两次。

SASS有没有一种真正的干嘛方式？

Answer 1

我至少有5种漂亮的方法可以做到这一点。我将分享1，如果你想要更多，我也可以分享更多。

使用函数

@mixin onParentHover() {
  $rootString: #{&};
  $parentIndex: str-index($rootString, " ");
  $parent: str_slice($rootString, 0, $parentIndex - 1);
  $children: str_slice($rootString, $parentIndex);

  @at-root #{$parent}:hover #{$children} {
    @content;
  }
}

用法

#parent {
  position: relative;
  width: 100px;
  height: 100px;
  #child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @include onParentHover {
      transform: scale(1.2, 1.2);
    }
  }
}

最终输出

#parent {
  position: relative;
  width: 100px;
  height: 100px;
}
#parent #child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#parent:hover #child {
  text-size: 20px;
}