In der tatsächlichen Original-Sass (nicht scss) konnten Sie die untenstehenden Mixins verwenden, um automatisch die font-size des Absatzes und aller Überschriften einzustellen.
Ich mag es, weil es viel kompakter ist. Und schneller zu tippen. Abgesehen davon bietet es die gleiche Funktionalität. Wenn Sie dennoch am neuen Syntax - scss - festhalten möchten, können Sie meine Sass-Inhalte hier frei in scss umwandeln: [SASS IN SCSS KONVERTIEREN]
Im Folgenden finden Sie vier Sass-Mixins. Sie müssen ihre Einstellungen an Ihre Bedürfnisse anpassen.
=font-h1p-style-generator-manual() // Das ist nicht nötig. Das sind nur Stile, um es hübsch zu machen.
=media-query-base-font-size-change-generator-manual() // Dieser Mixin setzt die Basisschriftgröße, die von den h1-h6-Tags verwendet wird, um ihre Größe in einer Media Query neu zu berechnen.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Hier setzen Sie die Größe von h1 und die Sprunggrößen zwischen h-Tags
=config-and-run-font-generator() // Dieser ruft nur die anderen auf
Nachdem Sie mit den Einstellungen fertig sind, rufen Sie einfach einen Mixin auf - und zwar: +config-and-run-font-generator(). Sehen Sie unten stehenden Code und Kommentare für weitere Informationen.
Ich denke, Sie könnten dies automatisch für eine Media Query tun, wie es für Überschriftentags gemacht wird, aber wir alle verwenden unterschiedliche Media-Queries, daher wäre es nicht für alle passend. Ich verwende einen Ansatz für Mobile-First-Design, so würde ich das machen. Kopieren und verwenden Sie diesen Code gerne.
KOPIEREN UND EINFÜGEN SIE DIESE MIXINS IN IHRE DATEI:
=font-h1p-style-generator-manual()
body
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // Google-Schriften
font-size: 100%
line-height: 1.3em
%headers
line-height: 1em
font-weight: 700
p
line-height: 1.3em
font-weight: 300
@for $i from 1 through 6
h#{$i}
@extend %headers
=media-query-base-font-size-change-generator-manual()
body
font-size: 1.2em
@media screen and (min-width: 680px)
body
font-size: 1.4em
@media screen and (min-width: 1224px)
body
font-size: 1.6em
@media screen and (min-width: 1400px)
body
font-size: 1.8em
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
$h1-fs: $h1-fs // Setze die Größe des ersten Kopfelements auf diese Größe
$h1-step-down: $h1-step-down // Verringere bei jedem Mal um 0,3
$p-same-as-hx: $p-same-as-hx // Setze die Schriftgröße von p auf dieselbe Größe wie h(6)
$h1-fs: $h1-fs + $h1-step-down // Loop-Korrektur
@for $i from 1 through 6
h#{$i}
font-size: $h1-fs - ($h1-step-down * $i)
@if $i == $p-same-as-hx
p
font-size: $h1-fs - ($h1-step-down * $i)
// FÜHRE NUR DIESEN MIXIN AUS. ER WIRD DEN REST AUSLÖSEN
=config-and-run-font-generator()
+font-h1p-style-generator-manual() // Nur ein Platzhalter für unsere Schriftart
+media-query-base-font-size-change-generator-manual() // Nur ein Platzhalter für unsere Media-Query-Schriftgröße
+h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Setzen Sie hier alle Parameter
STELLEN SIE ALLE MIXINS NACH IHREN BEDÜRFNISSEN EIN - SPIELEN SIE DAMIT! :) UND RUFEN SIE DANN OBEN IN IHREM AKTUELLEN SASS-CODE FOLGENDES AUF:
+config-and-run-font-generator()
Dies würde diese Ausgabe generieren. Sie können die Parameter anpassen, um unterschiedliche Ergebnisse zu erzeugen. Da wir jedoch unterschiedliche Media-Queries verwenden, müssen einige Mixins manuell bearbeitet werden (Style und Media).
GENERIERTES CSS:
body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.3em;
word-wrap: break-word; }
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
font-weight: 700; }
p {
line-height: 1.3em;
font-weight: 300; }
body {
font-size: 1.2em; }
@media screen and (min-width: 680px) {
body {
font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
body {
font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
body {
font-size: 1.8em; } }
h1 {
font-size: 2em; }
h2 {
font-size: 1.8em; }
h3 {
font-size: 1.6em; }
h4 {
font-size: 1.4em; }
h5 {
font-size: 1.2em; }
p {
font-size: 1.2em; }
h6 {
font-size: 1em;
}
