用什么工具合并CSS和SCSS代码

Question

由于我的代码难以阅读，我想合并一些长的常规 css 语句，如下所示：

.aui #content .columns-1-2-equal .row-fluid #column-3 header {
 prop1 ...prop2 prop3
}

当前 scss 文档。因此，假设我有一段 CSS 看起来像前面的语句，并且我有一个包含此内容的 scss 文件，例如：

.aui #content {
  prop4
  .columns-1-2-equal {
    prop5
    .row-fluid {

     #column-3 {
       .header {

        }
      }
  }

我想要结果

.aui #content {
  prop4
  .columns-1-2-equal {
    prop5
    .row-fluid {

     #column-3 {
       .header {
            // MERGED CODE
            prop1 ...prop2 prop3
        }
      }
  }

有没有一种无需在 SCSS 树中搜索等效元素并复制粘贴所有属性的自动方法？

Answer 1

您实际上不必这样做，因为它会自动编译。但是，我知道阅读这种非常长的格式的代码可能很困难。我测试了这个工具及其基本功能。希望对你有所帮助。

https://www.css2scss.com/

Answer 2

在这种情况下，您有两个文件：

OLD.scss

div {
  width: 300px;
}

和

NEW.scss

@import "OLD.scss";
div {
  color: red;
}

首先你应该运行 sass NEW.scss COMBINED.css 它会输出：

COMBINED.css

div {
  width: 300px;
}

div {
  color: red;
}

然后sass-convert COMBINED.css COMBINED.sass你会得到：

COMBINED.sass

div {
  width: 300px;
  color: red;
}

用什么工具合并CSS和SCSS代码

Which tool use to merge CSS and SCSS code

css

sass

less