css - 如何从 CSS 文件中导入指定的类而不是所有的东西

Question

我正在尝试将 一些 类从 CSS 文件(例如 bootstrap.css)导入到我的 site.scss SASS 文件，而不是 < strong>全部。以下代码的问题是我在编译的 site.css 文件中获取了所有 Bootstrap 类:

site.scss

@import "bootstrap";

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

另一方面，通过使用以下代码将 bootstrap.css 作为 reference 导入，可以使用 LESS 来做到这一点:

site.less

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

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

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

site.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 本身不支持 LESS import (reference) 功能。

---

TLDR；建议:

• 在完成样式表之前，使用uncss 或 postcss 从文件中删除已编译的 css。
• 如果可以，使用 mixin 和占位符类作为 scss 文件的重写，但这是最耗时的。
• import "file" as partial 这样 file="_file.scss" 和 @extend .class 如果你绝对必须，(手动方法，但假设它会起作用)

---

UNCSS

您可以使用 uncss 作为 npm 的包来删除编译后的 css(我知道这效率不高，但如果您不得不使用SASS )，然后您将删除从示例 Bootstrap 导入中生成的 chaff。

怎么做？
报价:SO-Answer-Joesph

How? The process by which UnCSS removes the unused rules is as follows:

• The HTML files are loaded by PhantomJS and JavaScript is executed.
• Used stylesheets are extracted from the resulting HTML.
• The stylesheets are concatenated and the rules are parsed by css-parse.
• document.querySelector filters out selectors that are not found in the HTML files.
• The remaining rules are converted back to CSS.

So yes, it removes selectors not in the DOM at runtime. If you have dynamically added selectors, you can make uncss ignore them by commenting: /* uncss:ignore */ before them, e.g...

确保在 UNCSS 中添加媒体选项
引用:SO-Answer-Deksden

---

SASS 背景研究:
以上总结:

nex3:sass 的核心领导之一，一直在 google 工作，并致力于 dart。他们发布了 dart-sass(不稳定版本)作为重写，以取代和改进 ruby sass。这很有趣，因为此重写还解释了 Ruby Sass 中缺乏功能开发以及重写的必要性。由于 ruby​​ sass 端口的核心贡献者:即 libsass(ruby-sass 的 C++ 实现)离开了 libsass 团队，它为提高 sass 性能带来了进一步的动力。

信用:

• Joesph
• Deksden