Question

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

site.scss

@import "bootstrap";

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

另一方面，通过使用以下代码将bootstrap.css导入引用，可以使用 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。
如果可以的话，使用mixins和占位符类作为scss文件的重写，但这是 MOST 耗时。
~~import "file"部分如果您必须file="_file.scss"和@extend .class，（手动方法，但假设它可以正常工作）~~

<强> UNCSS

你可以使用uncss作为npm的软件包删除已编译的css（我知道这不是有效的，但如果你使用SASS ），然后你删除从示例引导程序导入生成的箔条。

如何吗
引用：SO-Answer-Joesph

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


HTML文件由PhantomJS加载并执行JavaScript。

使用的样式表从生成的HTML中提取。

连接样式表，并通过css-parse解析规则。

document.querySelector过滤掉HTML文件中找不到的选择器。

其余规则将转换回CSS。


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

请确认您在UNCSS中添加了媒体选项
参考：SO-Answer-Deksden

SASS背景研究：
总结如上：

nex3：sass的核心主管之一，一直在google并致力于dart。他们发布了dart-sass（不稳定版本）作为重写，有利于替换和改进ruby sass。这很有趣，因为这次重写也解释了Ruby Sass中缺少功能开发以及重写的必要性。由于ruby sass端口的核心贡献者：即 libsass （ruby-sass的C ++实现）离开了libsass团队，因此它进一步推动了sass性能的提升。

信用：

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

1 个答案: