Iterate über theme-variable Dateien in SCSS

Ich möchte verschiedene CSS-Themen für ein WordPress-Theme erstellen, indem Sie Theme-Setup-Dateien verwenden. Das Setup (vereinfacht) wäre wie folgt:Iterate über theme-variable Dateien in SCSS

/themes/_theme1.scss 
/themes/_theme2.scss 
/components/_file1.scss 
/components/_file2.scss 
/theme.scss

Die Idee ist einfach Thematisierung zu aktivieren, indem Sie eine Klasse, um den Körper des Dokuments wie .theme-theme1 oder .theme-theme2 hinzufügen. In den Dateien _theme#.scss möchte ich Variablen wie Textfarbe, Schriftgrößen und so weiter definieren. In _file#.scss sind die aktuellen Stile definiert.

Meine Frage ist jetzt, wie man über die Theme-Setup-Dateien iterieren, während die files.scss aufgefüllt wird.

Beispiel Idee, Hintergrundfarbe:

body { 

###foreach themefile### 
&.theme# { 
    background-color: $background-color; 
} 
###/foreach### 

}

Ich weiß, wie dies mit nur in der resultierenden CSS-Datei zur Verfügung eines Thema zu tun, aber ich möchte, um alle Themen in der resultierenden CSS zur Verfügung stellen. Fühlen Sie sich frei, weitere Details zu fragen, da ich mir nicht sicher bin, ob ich es richtig erkläre.

Gibt es eine Möglichkeit, dieses Stylesheet über eine Art von foreach-Schleifen durch Variablen in Theme-Dateien zu erstellen oder muss es mit zusätzlichen scss-Regeln pro Theme-Datei gemacht werden?

Quelle

2017-01-22 Patrick

Dies ist etwas möglich mit einer Kombination von @import mit einem @mixin, um die Stile zu generieren. Diese Methode sollte minimalen wiederholten Code erzeugen.

So werden wir die Dateien einrichten.

- scss 
    - themes 
    - _theme1.scss 
    - _theme2.scss 
    - _theme.scss 
    - styles.scss

Der _ Präfix auf einige der Dateien verhindern, dass sie in CSS kompiliert wurde unser Build schön und sauber zu halten. Lassen Sie uns nun über die Inhalte der Dateien gehen:

_theme1.scss

$theme-name: 'theme1'; 

$primary-color: red; 
$primary-font-size: 24px;

_theme2.scss

$theme-name: 'theme2'; 

$primary-color: blue; 
$primary-font-size: 12px;

Dies ist ein stark vereinfachten Beispiel sollte aber die Grundidee geben. Jede Designdatei enthält nur Variablen.

_theme.scss

@mixin themestyle() { 
    body.#{$theme-name} { 
    p { 
     color: $primary-color; 
     font-size: $primary-font-size; 
    } 

    .bordered { 
     border: 3px solid $primary-color; 
    } 
    } 
}

Die themestyle mixin alle Stile für jedes Thema enthalten, die Variablen aus den /themes/_theme*.scss Dateien. Die body.#{$theme-name} erstellt einen Selektor wie body.theme1 oder body.theme2, abhängig vom aktuellen Wert der $theme-name Variable.

In dieser Demo style ich auf ein Tag, aber das könnte leicht auf alle Elemente/Selektoren für Ihre Website erweitert werden. Die wichtigste Sache zu erinnern ist, dass alle Stile innerhalb der body.#{$theme-name} Selektor sein müssen.

Jetzt das letzte und am wenigsten DRY Teil.Die Datei styles.scss importiert jede Themendatei und ruft dann das themestyle Mixin auf, um die Stile für jedes Thema zu generieren.

styles.scss

@import 'themes/theme'; 

/* Theme 1 Styles */ 
@import 'themes/theme1'; 
@include themestyles(); 

/* Theme 2 Styles */ 
@import 'themes/theme2'; 
@include themestyles();

Die wiederholte @import/@include ist erforderlich, weil es zu @import innerhalb einer Schleife oder mixin nicht möglich ist, oder das ist ein bisschen mehr optimiert werden könnte.

Sobald styles.scss kompiliert der Ausgang sein wird:

/* Theme 1 Styles */ 
body.theme1 p { 
    color: red; 
    font-size: 24px; } 
body.theme1 .bordered { 
    border: 3px solid red; } 

/* Theme 2 Styles */ 
body.theme2 p { 
    color: blue; 
    font-size: 12px; } 
body.theme2 .bordered { 
    border: 3px solid blue; }

Diese Themen können nun durch das Hinzufügen einer Klasse zum body Tag implementiert werden, wie <body class="theme1"> oder <body class="theme1">.

Hier ist eine Cloud9 project zeigt das Setup.

Quelle

2017-01-23 11:44:29

Iterate über theme-variable Dateien in SCSS

Antwort

Verwandte Themen