如何在不重复选择器的情况下为具有不同祖先的后代编写 Sass？答案

【问题标题】：How to write Sass for descendants with different ancestors without repeating selectors?如何在不重复选择器的情况下为具有不同祖先的后代编写 Sass？
【发布时间】：2019-08-24 11:22:01
【问题描述】：

我希望生成以下 CSS：

.productLink .productContainer {
  background-color: #e4e4e4;
  border: 1px solid #f0f0f0;
}
.productLink:hover .productContainer {
  background-color: #f3fbfd !important;
  border: 1px solid #01c1d6;
}

到目前为止，我有以下 SCSS：

.productLink
{
  .productContainer
  {
    background-color: #e4e4e4;
    border: 1px solid #f0f0f0;
  }

  &:hover .productContainer
  {
    background-color: #f3fbfd !important;
    border: 1px solid $mainColor;
  }
}

有没有办法不重复.productContainer？

【问题讨论】：

标签： html css sass css-selectors

【解决方案1】：

使用变量：

.productLink {

    $container: '.productContainer';

    #{$container} {
        // do something
    }

    &:hover #{$container} {
        // do something
    }
}

【讨论】：

现在变量被重复了，所以不是很干净，是吗。