Блог

Я хочу, чтобы был сгенерирован следующий 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;
  }

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

Есть ли способ без повторения .productContainer ?

Используйте переменную:

 .productLink {

    $container: '.productContainer';

    #{$container} {
        // do something
    }

    amp;:hover #{$container} {
        // do something
    }
}