Question

当使用SCSS悬停整个潜水时，尝试切换div中子级的背景颜色和字体颜色，基本上是在悬停的div内修改类，但这是通过SCSSy方式进行的。

我知道我可以简单地使用＆：hover下的类的完整名称，但是我正在尝试使用＆__表示法来完成它，显然这对我不起作用，似乎需要选择悬停选择器的父级不知何故，但还无法弄清楚。

.career_preview {
    width: 300px;
    height: 250px;
    background-image: linear-gradient(170deg, white 82%, black 82.6%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 20px;
    &__title {
        color: black;
        padding: 15px;
    }
    &__action {
        color: white;
        padding: 0 20px 10px 210px;
    }
    &__points {
        display: none;
    }
    &:hover {
        background-image: linear-gradient(170deg, black 82%, white 82.6%);
        &__title {
            display: none;        
        }
        &__action {
            color: black;
        }
        &__points {
            display: none;
            color: white;
        }
    }
}

Answer 1

问题在于这种结构：

.career_preview {
    &:hover {
        &__title {
            display: none;        
        }
    }
}

生成此选择器：

.career_preview:hover__title {
  display: none;
}

因为“＆”通过将父选择器与其余选择器连接而起作用：

首先您拥有.career_preview，然后将&:hover转换为.career_preview + :hover，这就是&的新值。现在&__title使用.career_preview:hover并附加__title，因此您可以：.career_preview:hover + __title。

在此处了解更多信息：https://sass-lang.com/documentation/style-rules/parent-selector

解决此问题的一种方法是执行以下操作：

.career_preview {
    &:hover {
      background-image: "...";
    }
    &:hover & {
        &__title {
            display: none;        
        }
    }
}

请注意额外的&:over &选择器，该选择器将其转换为.career_preview:hover .career_preview，因此&__title现在转换为.career_preview:hover .career_preview + __title

Answer 2

经过一番打法，这是正确的做法，看来很明显。

=Split("Test.Again", ".")(0)   ' Result: Test
=Split("Test.Again", ".")(1)   ' Result: Again

Answer 3

此代码：

.career_preview {
  &:hover {
    &__title {
      // some rules
    }
  }
}

将编译为：.career_preview:hover__title，因为&将每个部分都加入选择器。

您可以使用变量来简化代码并解决此问题。例如：

.career_preview {
  $that: '.career_preview';

  &__title {
    // some rules
  }

  &:hover {
    #{$that}__title {
      // some rules
    }
  }
}

将父级悬停在SCSS中时更改子类的定义

3 个答案: