如何從多個文件中提取常用的scss代碼？

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

這似乎是一個簡單的TA sk做的，但是有很多長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 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; 
    } 
}