Css 为SASS中的每个规则添加前缀

我的项目使用vuetify和许多我自己的风格。 我的样式经常在样式声明中多次使用

&

，如下所示：

.sis-sidebar {
  &__link {
    &.-active &-placeholder {
      color: #fff;
    }
  }
}

// Compiles to:

.sis-sidebar__link.-active .sis-sidebar__link-placeholder {
  color: #fff;
}

它可以很好地用于html，如下所示：

<div class="sis-sidebar__link -active">
  <div class="sis-sidebar__link-placeholder">
    This one is white
  </div>
</div>

我希望我所有的风格都有一些

#sis

前缀，但只能有一次。如果我这样做

@import 'framework';
#sis {
  @import 'my-styles';
}

// It compiles to:

#sis .is-sidebar__link.-active #sis .is-sidebar__link-placeholder {
  color: #fff;
}

// And I want it to be: 

#sis .is-sidebar__link.-active .is-sidebar__link-placeholder {
  color: #fff;
}

---

有可能吗

您可以这样做：

.sis-sidebar {
  &__link {
    #sis &.-active &-placeholder {
      color: #fff;
    }
  }
}

您还可以通过使用变量完全避免此问题，如：

$sidebar-block: '.sis-sidebar';
$sidebar-element: '__link';

#sis {
  #{$sidebar-block + $sidebar-element}.-active #{$sidebar-block + $sidebar-element}-placeholder {
    color: #fff;
  }
}

---

但事实上。字符串中间有#sis

#sis.is-sidebar\uu链接。-active#sis.is-sidebar\uu链接占位符

。我认为重点是#sis应该在开始时只出现一次，而不是多次。这是因为符号总是被完整的结构替换到根。这就是在不使用#sis的情况下使用代码版本的好处。然而，你不可能两全其美，因此我建议你简化你的选择器。无论如何，这是一个好主意，因为这样的代码对大多数人来说都很难阅读。我知道我可以修改所有样式表来完成任务。我还可以在任何地方用普通css替换SCS，并在每个规则前面加上#sis。问题不在于修改所有的样式（大约有500kb）——而是保留所有的旧代码，并以某种方式更新条目文件，使每个规则只自动地预先添加一次#sis。使用导入方法的唯一方法是将SCS传输到css，然后再返回到SCS。然后，代码将去掉所有的符号和选择器，您可以使用id选择器将其前置。但是，我没有这种方法的经验，因此您必须尝试一下。

$sidebar-block: '.sis-sidebar';
$sidebar-element: '__link';

#sis {
  #{$sidebar-block + $sidebar-element}.-active #{$sidebar-block + $sidebar-element}-placeholder {
    color: #fff;
  }
}