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