SASS如何从CSS文件中导入指定的类，而不是整个类

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

site.scss

@import "bootstrap";

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

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

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

.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*/
}

另一方面，可以通过使用以下代码导入bootstrap.css作为引用来使用更少的实现这一点：

site.less

@import "bootstrap";

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

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

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

.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*/
}

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

site.css

@import "bootstrap";

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

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

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

.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实现这一点？如果是，举个简单的例子会有所帮助

---

谢谢。

不幸的是，没有简单的答案，在撰写本文时，

Ruby-Sass

本机不支持LESS

导入（参考）

功能

---

TLDR；建议：

• 在完成样式表之前，使用uncss或postss从文件中删除已编译的css
• 如果可以，可以使用mixin和占位符类重写scss文件，但这是最耗时的

• 将“file”

  作为部分导入，以便

  file=“\u file.scss”

  和

  @extend.class

  如果必须的话，（手动方法，但假设它可以工作）

---

UNCSS

您可以将uncss用作

npm

中的一个包来删除已编译的css（我知道这不是很有效，但是如果您使用

SASS

），那么您将删除从示例引导导入生成的颖壳

怎么做？
引述：

怎么做？UnCSS删除未使用规则的过程如下：

• HTML文件由PhantomJS加载，并执行JavaScript
• 使用的样式表从生成的HTML中提取
• 样式表连接在一起，规则通过css解析进行解析

• document.querySelector

  过滤掉HTML文件中找不到的选择器
• 其余的规则将转换回CSS

因此，是的，它会在运行时删除DOM中没有的选择器。如果动态添加了选择器，则可以通过在选择器前面添加注释：/*uncss:ignore*/使UNCS忽略它们，例如

确保在UNCSS中添加媒体选项
参考：

---

SASS背景研究：
综上所述：

nex3

：sass的核心领导之一，一直在

google

工作，致力于

dart

。他们发布了

dart-sass

（不稳定版本），作为对

ruby-sass

的替代和改进的重写。这很有趣，因为这种重写还解释了

Ruby-Sass

中缺乏特性开发以及重写的必要性。由于ruby sass端口的一个核心贡献者，即libsass（ruby sass的C++实现）离开了libsass团队，这进一步推动了sass性能的提高

学分：

---

并没有为您提供所需的内容？进一步了解，您提到的功能是

导入参考

，这对于我使用scss来说是一个新概念。似乎有

静默类

，而且它似乎是sass-git存储库中的一个待定功能@Efe可能有助于@Efe-TLDR；建议：使用本机Sass以外的其他方法，因此首先，您需要剪切由Sass生成的未使用的css（因为没有导入引用）自从

nex3

以来，

sass

的作者一直在

googledart

工作，他们开始将sass从

ruby

迁移到

dart

，因此功能更新缓慢。我认为，由于这个原因，未来的版本可能与

dart/sass

版本相关联，并且原生ruby支持存在一些不确定性。@Denis WOW！运气不好。你是一个很好的研究人员，似乎你真的比我更需要sass的这个功能！！还有一个问题。POST/UNCS是否影响媒体查询？假设我想将一些bootstrap（一个带有mediaqueries的示例css文件）导入到我的sass中，并避免将bootstrap发送到客户端（完全删除我页面中bootstrap.css的任何CDN）。由于媒体查询未被明确引用，而是用于响应性设计，UNCS是否会识别这一点并保留媒体查询？类似于智能步行。