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

问题描述

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

I have several styles that use Sass' @extend or @include to inherit properties from selectors imported from Bootstrap scss files.

我想将所有Bootstrap选择器转换为@ extend-Only占位符，因此我不需要在最终的.css输出中包含任何原始的Bootstrap选择器。

I would like to convert all of the Bootstrap selectors to @extend-Only placeholders, so I do not have to include any original Bootstrap selectors in my final .css output. The goal is to write my own css classes, extend from Bootstrap only where desired.

例如，我想有一个名为.super-freaky-nav的navbar：

For example, I wish to have a navbar called .super-freaky-nav:

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

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

Ideally, my final .css output will not have a single reference to .navbar, .navbar-default, or .navbar-top-fixed.

有没有办法做到这一点，不进入_navbar.scss文件和转换所有的选择器到@ extend-only类（％navbar，％navbar-default，％navbar-top-fixed等）？
谢谢！

Is there a way to do this without going into the _navbar.scss file and converting all of the selectors to @extend-Only classes (%navbar, %navbar-default, %navbar-top-fixed, etc)?Thanks!

推荐答案

否。 Sass没有能力做你所要求的。仍然有一个合理的需要，能够扩展正常的类，Sass没有办法区分类应该或不应该扩展。

No. Sass does not have the ability to do what you're asking for. There's still a legitimate need to be able to extend normal classes and Sass has no way of differentiating between classes that should or shouldn't be extended.

这篇关于使用@ extend-Only来抽象Bootstrap选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！