SCSS (font-weight) aus der font.scss überschreiben

Donner · March 1, 2017 at 11:51 AM

Hallo,

ich möchte für meinen angepassten Stil an 2 Stellen font-weight aus der Datei style/bootstrap/mixin/font.scss überschreiben. Dort wird original festgelegt, dass font-weight 300 sein soll. Ich möchte aber in meinem Fall die 300 durch 400 überschreiben. Das gelingt mir bisher nicht.

Der betreffende originale Code in der font.scss lautet:

Sass (SCSS)

@mixin wcfFontSection {
    font-weight: 300;
    line-height: 1.28;
    
    @include screen-md-up {
        font-size: $wcfFontSizeSection;
    }
    
    @include screen-sm-down {
        font-size: 20px;
    }
}

@mixin wcfFontTitle {
    font-weight: 300;
    line-height: 1.05;
    
    @include screen-md-up {
        font-size: $wcfFontSizeTitle;
    }
    
    @include screen-sm-down {
        font-size: 23px;
    }
}

Display More

Wie kann ich nun für wcfFontTile und wcfFontSection die font-weight überschreiben?

the_waiters · March 1, 2017 at 12:02 PM

Hallo,

das geht nicht?

Sass (SCSS)

@mixin wcfFontSection {
    font-weight: 400;
}

@mixin wcfFontTitle {
    font-weight: 400;
}

SoftCreatR · March 1, 2017 at 5:12 PM

Also das geht:

Sass (SCSS)

@mixin foo {color: red}
@mixin foo {color: blue}
p {@include foo}

Ergibt

Code

p {color: blue}

Donner · March 2, 2017 at 1:19 AM

Sass (SCSS)

@mixin wcfFontSection {
    font-weight: 400;
}
@mixin wcfFontTitle {
    font-weight: 400;
}

Wenn ich den Code im Stil-Editor in den CSS-Bereich schreibe, nutzt er es scheinbar nicht. Wenn ich es in den SCSS-Bereich schreibe, kann ich es nicht speichern/absenden, da er Fehler meldet.

SoftCreatR · March 2, 2017 at 5:21 AM

Das Problem wird sein, dass dein Mixin später zur Verfügung steht, als er genutzt wird. Da müsste man via Plugin eine fontx.scss erstellen, die direkt nach der font.scss geladen wird. Dann sollte es klappen.

Donner · March 2, 2017 at 9:10 AM

Ich dachte ja bisher ganz naiv, dass dafür im Stil-Editor der SCSS-Bereich gedacht ist, so dass ich dort die ursprünglichen SCSS-Variablen überschreiben könnte.

Im Grunde wäre es auch kein Problem die originale font.scss abzuändern. Dann müsste ich aber bei jedem Update die Datei erneut ändern, was ja nicht Sinn der Sache wäre.

Quote from SoftCreatR

Da müsste man via Plugin eine fontx.scss erstellen, die direkt nach der font.scss geladen wird.

Habe ich irgendwie Einfluss darauf, wann eine SCSS-Datei aus einem Plugin geladen wird? Oder einfach ganz simpel ein Plugin erstellen, welches einfach /style/fontx.scss einbindet?

SoftCreatR · March 2, 2017 at 9:20 AM

Ich hab bewusst fontx.scss geschrieben. Ich gehe nämlich davon aus (hab nicht in den Code geschaut), dass die Sass-Dateien alphabetisch geladen werden (bis auf wenige Ausnahmen) d.h. erst würde die font.scss geladen und direkt danach deine erweiterte scss. Darüber hinaus würde dann dein mixin genutzt, da es das Original-Mixin ja überschreibt.

Donner · March 2, 2017 at 9:58 AM

Ich habe mal ein wenig ausprobiert. Die Datei fontx.scss muss im Ordner bootstrap/mixin/fontx.scss liegen. Nur dann wird sie geladen und überschreibt das vorherige @mixin. Allerdings überschreibt sie es komplett - also nicht nur meine font-weight Deklaration. Somit muss ich die beiden Definitionen komplett rein nehmen. Das geht, führt aber bei möglichen Änderungen am originalen font.scss wieder dazu, dass ich meine Datei dann passend abändern muss. Ich schaffe es nicht, nur die font-weight Deklaration einzuschleusen, um die originale zu überschreiben.

Ungewollter Nebeneffekt ist außerdem, dass es sich auch im ACP auswirkt. Damit kann ich zwar leben, aber es ist nicht Sinn der Sache.

Wichtige Anmerkung: die Datei habe ich einfach nur manuell in oben genanntem Verzeichnis abgelegt. Ich habe also noch kein Plugin registrieren lassen. Vielleicht ist dies auch der Grund, warum es bisher nur direkt im Bootstrap-Ordner funktioniert?

SoftCreatR · March 2, 2017 at 10:22 AM

Quote from Donner

Allerdings überschreibt sie es komplett

Das hätte ich vielleicht erwähnen sollen. Es könnte allerdings sein, dass SASS da noch eine Magic bietet, von der ich nichts weiß. Stecke da nicht so drin.

Quote from Donner

Ungewollter Nebeneffekt ist außerdem, dass es sich auch im ACP auswirkt. Damit kann ich zwar leben, aber es ist nicht Sinn der Sache.

Ist nur logisch, wenn das Mixin im ACP auch genutzt wird und du das Original ja überschreibst.

Quote from Donner

Wichtige Anmerkung: die Datei habe ich einfach nur manuell in oben genanntem Verzeichnis abgelegt. Ich habe also noch kein Plugin registrieren lassen. Vielleicht ist dies auch der Grund, warum es bisher nur direkt im Bootstrap-Ordner funktioniert?

Kann sein. Im Normalfall werden Sass-Dateien nämlich nur dann beachtet, wenn sie registriert wurden und das wiederum passiert eigentlich nur durch Plugin-Installation.

Donner · March 2, 2017 at 11:42 AM

Wenn ich ein ganz simples Plugin mache, das nur style/fontx.scss installiert oder testweise auch style/ui/fontx.scss, dann bleibt das erfolglos.

Mhhh, kann doch nicht sein, dass es keinen Weg gibt. Jedenfalls wäre es keine Option, wenn ich in jede CSS-Klasse dann per @include wieder einbinden müsste. Dann könnte ich auch direkt jede notwendige CSS-Klasse im Stil-Editor abändern. Das Ziel soll ja sein, dass ich das originale Mixin so partiell überschreiben kann, dass es anschließend an den notwendigen Stellen automatisch wieder eingebunden wird.

WoltLab: Nebenbei bemerkt wäre das alles kein Problem, wenn WoltLab schon direkt im Stil-Editor nicht nur die Pixel-Größen per UI anpassen lassen würde, sondern konsequenter Weise auch font-weight. Abhängig von der gewählten Schriftart, die man im Stil-Editor-UI definieren kann, ändert sich nämlich auch deutlich die "Dicke" der Schrift in den Überschriften.

Participate now!