SCSS修改父选择器

发布于 2025-01-19 21:06:12 字数 696 浏览 0 评论 0原文

有没有办法将类添加到带有.scs的嵌套选择器的第一个元素中？想象以下示例：

body p {
  color: black;
}

body.other-mode p {
  color: red;
}

可以这样表达它（或以类似的方式表达）

body p {
  & {
    color: black;
  }
  .other-mode& {
    color: red;
  }
}

我知道问题的示例。

body {
  & p {
    color: black;
  }
  
  &.other-mode p {
    color: red;
  }
}

我还尝试了使用一些SCSS选择器，但它们的工作状态不如预期，在下面的情况下最终为身体P身体。代码>

body p {
  & {
    color: black;
  }
  #{selector-replace(&, "body", "body.other-mode")} {
    color: red;
  }
}

原文

Is there a way to add a class to the first element of a nested selector with .scss?
Imagine the example below:

body p {
  color: black;
}

body.other-mode p {
  color: red;
}

Would it be possible to express it like this (or in a similar way, since this won't compile)

body p {
  & {
    color: black;
  }
  .other-mode& {
    color: red;
  }
}

I'm aware this can be written like this, but that's just a different way of "solving" an example of the issue.

body {
  & p {
    color: black;
  }
  
  &.other-mode p {
    color: red;
  }
}

I also tried using some scss selectors but they don't work quite as expected, in the case below the selectors ends up being body p body.other-mode p instead of body p

body p {
  & {
    color: black;
  }
  #{selector-replace(&, "body", "body.other-mode")} {
    color: red;
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤千羽 2025-01-26 21:06:13

为了使您的最后解决方案起作用，您可以使用@at-at-root 。

body p {
  & {
    color: black;
  }
  @at-root #{selector-replace(&, "body", "body.other-mode")} {
    color: red;
  }
}

编译到

body p {
  color: black;
}
body.other-mode p {
  color: red;
}

但就个人而言，我发现您的原始解决方案是最可读的。
body {＆amp;。hother-mode p {color：red;}}
我发现Split Body和P在SCSS中更方便。

To make your last solution work, you can use @at-root.

body p {
  & {
    color: black;
  }
  @at-root #{selector-replace(&, "body", "body.other-mode")} {
    color: red;
  }
}

compiles to

body p {
  color: black;
}
body.other-mode p {
  color: red;
}

But personally, I find your original solution the most readable.
body { &.other-mode p {color: red;} }
I find the split body and p more convenient in SCSS.

回复收藏 0 原文

~没有更多了~