css - 有没有一种方法可以将两个 CSS 文件减少为一个包含唯一选择器的文件?

标签 css sass

我有一个很大的 CSS 文件,它是从 Sass 编译而来的。我有 一些 原始 Sass 文件,但查看源映射并不是全部。

我能够将我拥有的 Sass 编译成 CSS,但当然缺少一些样式规则。

如何将这两个文件缩减为只有原始文件特有的规则?我希望能够做到这一点,以便我可以将该 CSS 包含在我手头的 Sass 源代码中,以加快 future 的开发。

最佳答案

我会这样做:

  • 获取原始 CSS 并将其通过将扩展名更改为 .scss 将其转换为 Sass>
  • 如果原始 CSS 被压缩,使用类似 CSS Formatter 的东西获得可读代码
  • 将其命名为legacy 并首先导入您的主 Sass 文件
  • 使用nanocss在构建过程中删除重复样式(确保启用 discard-duplicates 插件)

可选:只为生产构建启用重复数据删除,因为它会减慢 CSS 生成速度

缺点:

  • 如果在 Sass 重复数据删除中更改现有类的属性不会与遗留匹配,并且您最终会得到几乎重复的内容 - 为防止这种情况发生,我会手动进入 legacy 以在更改旧类时删除它们在 sass partials 中

关于css - 有没有一种方法可以将两个 CSS 文件减少为一个包含唯一选择器的文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49946366/

相关文章:

html - 将两个图像居中,但将它们放在不同的行中?

css - 如何将自定义 css 应用于 ionic 4 组件?

intellij-idea - 如何在 IntelliJ IDEA 10.5 中对 SCSS 文件使用代码完成?

html - Bootstrap 3 中未对齐的行

html - `css` 的 `html_page()` 参数是否与 blogdown 中的 `build_site(method = ' html')` 一起使用?

css - rails 上的样式下拉 ruby

jquery - 如何在 Bootstrap 4 中为 nav-link 元素设置不同的对齐方式?

android - CSS :focus automatically opens link on android device

javascript - 检测输入的空字段

compass-sass - 在 Sass 中包含使用变量作为名称的 mixins