仅使用@extend来抽象Bootstrap选择器

Question

我有几个使用Sass的@extend或@include从引入的Bootstrap scss文件中继承属性的样式。

我想将所有Bootstrap选择器转换为仅@extend占位符，这样我就不必在最终的.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 等）的情况下实现这一点？

谢谢！

- bingo

Answer 1

我正在探索一种潜在的实现方式，使用ruby-sass中的自定义导入器或者node-sass（2.0+）中实验性的importers特性，对Bootstrap Sass文件应用sed（查找和替换）转换，将前导类定义替换为%语法。我还没有做过太多的实验，也不知道在没有全面的视觉测试套件的情况下可能会遇到什么问题。很高兴有人帮忙。

- AL the X

---

我已经放弃了这个努力，转而使用uncss和http://davidwalsh.name/uncss。 - AL the X

Answer 2

不行。Sass无法满足你的要求。仍然需要能够扩展普通类，而Sass无法区分哪些类应该被扩展，哪些不应该被扩展。

- cimmanon

---

我进一步研究了这个问题，就目前版本的Sass而言，你是正确的。贡献者们已经讨论过添加类似功能的事情，但这个问题已经摆在桌面上很长时间了，却没有得到解决。目前，我只能创建自己的仅限于扩展的Bootstrap选择器占位符版本，但这种方法实际上远非理想。如果你有其他建议，我将不胜感激。谢谢！ - bingo

这方面有什么新消息吗？很想做同样的事情。以下怎么样：将所有内容包含和编译到application.css中，但不从网站引用此文件，而是只引用另一个文件，该文件仅包含扩展内容（例如only_my_selectors.css）？因此，客户端只会加载扩展内容。 - Joshua Muheim