我想要生成以下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的方法?

最佳答案

使用变量:

.productLink {

    $container: '.productContainer';

    #{$container} {
        // do something
    }

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

关于html - 如何在不重复选择器的情况下为具有不同祖先的后代编写Sass?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55486532/

10-11 23:23