SASS：如何在样式表中使用选择器将每个规则添加到“命名空间”答案

【问题标题】：SASS: How do I prepend every rule in a stylsheet with a selector to 'namespace'SASS：如何在样式表中使用选择器将每个规则添加到“命名空间”
【发布时间】：2013-07-05 22:42:00
【问题描述】：

我想在旧代码库中包含新的 SASS。考虑到已经编写的新样式，如何避免新样式泄漏。

例如

.box
  width: 100%
  // ...

.tab
  display: inline-block
  &:active
    font-weight: bold

// Many more rules

到

.sandbox 
 .box
    width: 100%
    // ...
 .tab
    display: inline-block
    &:active
      font-weight: bold
 // .many .more .rules

这将超过许多规则。

所以旧代码库中的新 html sn-ps 会有

<div class="sandbox">
  <div class="box">
   <!-- Content here -->
  </div>

或者 - 有没有更简单的方法来避免 css 代码泄漏？

【问题讨论】：

你有没有尝试过？您似乎了解嵌套的概念，因此解决方案应该是显而易见的。

标签： namespaces sass

【解决方案1】：

答案很明显：

.sandbox {
    @import "foo";
}

【讨论】：

我不知道这是否显而易见，但它确实很优雅，并且确实有效，谢谢。
基本上我也是这样做的。但是当您在foo 中使用@extend 时，这似乎是一个问题。它将.sandbox 两次添加到选择器中。目前不知道如何解决这个问题。
如果导入的文件的选择器在规则前面以外的任何地方都使用 & 符号，则此方法不起作用。例如。 .box { color: red; .theme-green & { color: green; } }。在这里，输出将是.sandbox .box { color: red; } .theme-green .sandbox .box { color: green; }，理想情况下.sandbox应该在.theme-green之外。