Question

我当前正在向我的站点添加暗模式。更改全部通过脚本处理，并考虑了用户的偏好以及他们计算机的当前外观。如果在暗模式下，我基本上会在<body>上得到一个“暗”类，否则什么也没有。

一切正常，但是在一个元素上我需要基于此更改背景图像，但是我遇到了一个问题，因为我的顶级选择器已经基于主体了。

这是我的代码：

.page-home {
  .home-intro__caricature {
    @include ratio-box(100%);
    width: 100%;
    border-radius: 50%;
    background-color: var(--main-background-color);
    background-image: url('../src/svgs/caricature.svg'), url('../src/svgs/pattern-light.svg');
    background-repeat: no-repeat, repeat;
    background-position: center bottom, center center;
    background-size: contain, auto;
    transform: rotateY(0deg);
    z-index: 2;
    transition: box-shadow 0.2s ease-in-out;

    &.dark {
      background-image: url('../src/svgs/caricature.svg'), url('../src/svgs/pattern-dark.svg');
      background-repeat: no-repeat, repeat;
      background-position: center bottom, center center;
      background-size: contain, auto;
    }
  }
}

问题在于.page-home是<body>上的一类，而.dark也是如此。如何构造选择器，以便将.dark添加到body的选择器中？

Answer 1

如果我正确理解了您的问题，则应该可以执行以下操作。

也无需重复其他背景属性。

.page-home {
  .home-intro__caricature {
    @include ratio-box(100%);
    width: 100%;
    border-radius: 50%;
    background-color: var(--main-background-color);
    background-image: url('../src/svgs/caricature.svg'), url('../src/svgs/pattern-light.svg');
    background-repeat: no-repeat, repeat;
    background-position: center bottom, center center;
    background-size: contain, auto;
    transform: rotateY(0deg);
    z-index: 2;
    transition: box-shadow 0.2s ease-in-out;
  }

  &.dark {
    .home-intro__caricature {
      background-image: url('../src/svgs/caricature.svg'), url('../src/svgs/pattern-dark.svg');
    }
  }
}

棘手的Sass选择器嵌套

1 个答案: