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

时间:2016-08-02 10:34:05

标签: sass dry

将大量冗余的蹩脚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代码转换为多维关联数组并处理数组以查找交集,但我找不到任何简单的解决方案,所以任何帮助都会受到赞赏。

1 个答案:

答案 0 :(得分:0)

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

$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;
    }
}