棘手的 sass 选择器嵌套答案

【问题标题】：Tricky sass selector nesting棘手的 sass 选择器嵌套
【发布时间】：2019-09-07 20:39:06
【问题描述】：

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

一切正常，但在一个元素上，我需要基于此更改背景图像，但我遇到了问题，因为我的顶级选择器已经基于 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 的选择器中？

【问题讨论】：

标签： css sass macos-darkmode

【解决方案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 解决方案。当然，您可以通过使用 JavaScript 向子元素添加一个类来使 SASS 更简洁。
是的，我想不出一个，因此我的帖子。我可以通过 JS 添加一个类，但我很可能会在几个地方遇到类似的问题，所以我不认为我会走那条路。我会像你建议的那样选择拆分路线。谢谢