Question

将大量冗余的蹩脚css文件转换为scss文件后，我有一堆scss文件。我很确定这些文件中有很多常见的css重复，我想提取这段代码。

作为一个例子，让我们说我有这个scss代码块（让我们称之为块A）：

.test {
    color: white;

    .toto {
        background: red;
        font-size: 12px;
    }
}

另一个块（我们称之为块B）：

.test {
    color: black;

    .toto {
        background: blue;
        font-size: 12px;
        text-align: center;
    }
}

我希望能够从块A和B中提取以下常见的scss代码：

.test {
    .toto {
        font-size: 12px;
    }
}

这似乎是一项简单的任务，但是如果有大量的长scss文件，手动执行它真的很痛苦。在搜索了一段时间后，我找不到任何工具。

中间解决方案可能是将sass代码转换为多维关联数组并处理数组以查找交集，但我找不到任何简单的解决方案，所以任何帮助都会受到赞赏。

Answer 1

有一些方法，但在这种情况下，我会选择一个变量：

$base-font-size: 12px;

.test {
    color: white;

    .toto {
        background: red;
        font-size: $base-font-size;
    }
}

.test {
    color: black;

    .toto {
        background: blue;
        font-size: $base-font-size;
        text-align: center;
    }
}

或者您可以添加一些默认值的toto mixin并使用：

@mixin toto($background: red, $text-align: left, $font-size: 12px) {
    .toto {
        background: $background;
        text-align: $text-align;
        font-size: $font-size;
    }
}


.test {
    color: white;
    @include toto();
}

.test {
    color: black;
    @include toto(blue, center);
}

编辑：或使用扩展：

.font-size-12 {
    font-size: 12px;
}

.test {
    color: white;

    .toto {
        @extend .font-size-12;
        background: red;
    }
}

.test {
    color: black;

    .toto {
        @extend .font-size-12;
        background: blue;
        text-align: center;
    }
}

如何从多个文件中提取常见的scss代码？

1 个答案: