Wie kann man scss-Code aus mehreren Dateien extrahieren?

Question

Nachdem ich viele überflüssige css-Dateien in scss-Dateien umgewandelt habe, habe ich eine Menge scss-Dateien. Ich bin mir ziemlich sicher, dass es unter diesen Dateien viele häufige CSS gibt und ich möchte diesen Code extrahieren.

Als Beispiel lassen Sie uns sagen, dass ich diesen Block von SCSS Code haben (lassen Sie uns den Block A nennen):

.test { 
    color: white; 

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

Und ein anderer Block (wir Block B nennen wollen):

.test { 
    color: black; 

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

ich möchte folgende gemeinsame SCSS Code von Block A und B in der Lage sein zu extrahieren: scheint

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

Es ist wie ein einfaches ta sk zu tun, aber mit einer großen Liste von langen scss-Dateien, ist es wirklich schmerzhaft, es manuell zu tun. Nach einiger Suche habe ich kein Werkzeug dafür gefunden. Eine intermediäre Lösung könnte darin bestehen, Sass-Code in ein multidimensionales assoziatives Array umzuwandeln und Arrays zu bearbeiten, um Schnittpunkte zu finden, aber ich konnte keine einfache Lösung finden, um dies zu tun, so dass jede Hilfe geschätzt werden würde.

Answer 1

Es gibt ein paar Ansätze, aber in diesem Fall würde ich für eine Variable entscheiden:

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

Oder Sie könnten eine toto mixin mit einigen Standardeinstellungen hinzufügen und verwenden Sie diese:

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

EDIT : oder verwenden Sie extend:

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