使用 @extend-Only 抽象 Bootstrap 选择器

Question

我有几个样式使用 Sass 的 @extend 或 @include 来继承从 Bootstrap scss 文件导入的选择器的属性。

我想将所有 Bootstrap 选择器转换为 @extend-Only 占位符，因此我不必在最终的 .css 输出中包含任何原始 Bootstrap 选择器。目标是编写我自己的 css 类，仅在需要的地方从 Bootstrap 扩展。

例如，我希望有一个名为 .super-freaky-nav 的导航栏：

.super-freaky-nav{
    @extend .navbar;
    @extend .navbar-default;
    @extend .navbar-top-fixed;
}

理想情况下，我的最终 .css 输出不会包含对 .navbar、.navbar-default 或 .navbar-top-fixed 的单一引用。

有没有办法在不进入 _navbar.scss 文件并将所有选择器转换为 @extend-Only 类（%navbar、%navbar-default、%navbar-top-fixed 等）的情况下做到这一点？ 谢谢！

Answer 1

我正在探索的一个潜在实现使用custom importers in ruby-sass 或the experimental importers feature in node-sass (2.0+) 对Bootstrap Sass 文件应用sed（查找和替换）转换，用% 语法替换前导类定义。不过，我过去的实验不多，而且我不知道如果没有全面的视觉测试套件，我可能会破坏什么。很高兴能得到一些帮助。

Answer 2

没有。 Sass 无法满足您的要求。扩展普通类仍然是合理的需求，而 Sass 无法区分应该扩展或不应该扩展的类。