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代码

2 个答案: