如何从 CSS 文件导入指定的类而不是所有内容

Question

我正在尝试将一些类从CSS文件（如 bootstrap.css）导入到我的 site.scss SASS文件中，而不是全部。以下代码的问题是我在编译的 site.css 文件中获取了所有引导类：

站点.scss

@import "bootstrap";

.my-div-md-6
{
    /*some other styles*/
    @extend .col-md-6;
}

另一方面，可以通过使用以下代码导入 bootstrap.css 作为参考来使用LESS来完成此操作：

无站点

@import (less, reference) "bootstrap.css";

.my-div-md-6{
     /*some other styles*/
    &:extend(.col-md-6);
}

LESS的编译输出非常轻，如下所示：

站点.css

.my-div-md-6 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 992px) {
  .my-div-md-6 {
    float: left;
  }
  .my-div-md-6 {
    width: 50%;
  }
}
.my-div-md-6 {
  /*some other styles*/
}

用SASS可以实现这一点吗？如果是，给出一个简单的例子会有所帮助。

Answer 1

不幸的是，没有简单的答案，并且在撰写本文时，它Ruby Sass本身并不支持 LESSimport (reference)功能。

太长了；建议：

• 在最终确定样式表之前，使用uncss 或 postcss从文件中删除已编译的 css。
• 如果可以的话，使用 mixins 和占位符类来重写 scss 文件，但这是最耗时的。
• import "file"作为部分file="_file.scss"，@extend .class如果你绝对必须这样做，（手动方法，但假设它会起作用）

联合国社会保障委员会

您可以使用 uncss 作为包来npm删除已编译的 css（我知道这效率不高，但如果您必须使用SASS），那么您将删除从示例引导导入生成的干扰。

如何？
引用：SO-答案-约瑟夫

如何？UnCSS删除未使用规则的过程如下：

• HTML 文件由 PhantomJS 加载并执行 JavaScript。
• 使用的样式表是从生成的 HTML 中提取的。
• 样式表被连接，规则由 css-parse 解析。
• document.querySelector过滤掉 HTML 文件中找不到的选择器。
• 其余规则将转换回 CSS。

所以是的，它会在运行时删除不在 DOM 中的选择器。如果您动态添加了选择器，则可以通过在它们之前注释： /* uncss:ignore */ 来使 uncss 忽略它们，例如..

请确保在 UNCSS REF：SO-Answer-Deksden中添加媒体选项

SASS背景研究：
以上总结：

nex3：sass 的核心领导之一，一直google在dart. 他们发布dart-sass（不稳定版本）作为重写，有利于替换和改进ruby sass。这很有趣，因为这次重写也解释了功能开发的缺乏Ruby Sass以及重写的必要性。由于ruby sass移植的核心贡献者：即libsass（ruby-sass的C++实现）离开了libsass团队，这为sass性能的提高带来了进一步的动力。

信用：

• 乔斯夫
• 德克斯登