Wie Größen für alle Header mit SASS mit modularer Skala zu generieren

Question

Ich bin auf der Suche nach Größen für H1 bis H6 mit SCSS erstellen. In diesem Beispiel wird davon ausgegangen, dass ich die Variablen $ base-size und $ modular-scale erstellt habe. Im Einzelnen:

h6: $base-size * $modular-scale * 1 
h5: $base-size * $modular-scale * 2 
h4: $base-size * $modular-scale * 3 
... 
h1: $base-size * $modular-scale * 6 

ich kann nicht herausfinden, wie jede dieser Klassen zu erzeugen, eine mixin mit oder eine Funktion (oder was auch immer entsprechende Funktion für diese Aufgabe).

so weit ich habe:

@mixin make-header-size ($type, $scale) { 
    .#{$type} { 
    $type * $scale * (...scalar) 
    } 
} 

nicht sicher, wie der Rest zu vervollständigen, so dass ich kurz und bündig jede dieser Größen erzeugen kann.

Answer 1

Hier haben Sie eine einfache und kleine @for Schleife die sechs Überschrift Stile mit einem Skala Variable zu erzeugen, die die Menge des Pixels zeigt die Überschriften von h6 bis h1 wachsen:

// h6 starts at $base-font-size 
// headings grow from h6 to h1 by $heading-scale 
$base-font-size: 18px; 
$heading-scale: 8; // amount of px headings grow from h6 to h1 

@for $i from 1 through 6 { 
    h#{$i} { 
    font-size: $base-font-size + $heading-scale * (6 - $i); 
    } 
} 

Und ein demo codepen mit ihm zu spielen.

Answer 2

Nur eine kleine Funktion, die ich geschaffen habe

$types : h6 h5 h4 h3 h2 h1; 
$base-size : 16px; 

$modular-scale : 0.5; 
@each $type in $types{ 
    #{$type} { 
    font-size : $base-size * $modular-scale; 
    $modular-scale : $modular-scale + 1; 
    } 
} 

Siehe PEN

ich diese Funktion für meinen persönlichen Gebrauch bin mit.

$headings : h1 h2 h3 h4 h5 h6; 
$font-size-base : 16px; 

$font-size-upper : 36px; 
$font-size-dec : 4px; 
@each $heading in $headings{ 
    #{$heading} { 
    font-size : $font-size-upper; 
    font-size : ($font-size-upper/$font-size-base) + em; 
    } 
    $font-size-upper : $font-size-upper - $font-size-dec; 
} 

Check it out.

Answer 3

@ Fabians und @ Jinus Antworten sind ziemlich gut. Allerdings wollte ich, dass meine scss-Größen kontext- und bildschirmgrößenabhängig sind. Hier ist meine Mobile-First-Lösung, die ich durch Mischen von @Fabian, this blog post und einem media-query Mixin erreicht habe. Beachten Sie, während Sie über den Code schauen, dass, wenn Ihr Kontext nicht in Context-Font ist, kein font-size definiert wird, seien Sie also vorsichtig.

// https://codepen.io/zgreen/post/contextual-heading-sizes-with-sass 
// https://stackoverflow.com/questions/38426884/how-to-generate-sizes-for-all-headers-using-sass-with-modular-scale 
//define vars and mix-ins 
$context-font: (header: 1, section: 1, article: 0.67, footer: 0.5, aside: 0.33); // Make fonts change size dependent upon what context they are in 
$step-size-font: 0.333333; //step size for incremental font sizes 
$amplifier-font-mobile: 1.2; //convenience var to in/decrease the values of header values in one place 
$amplifier-font-desktop: 1.4; //convenience var to in/decrease the values of header values in one place 
$on-laptop: 800px; 
$margin-heading: 0.67em 0; 
@mixin media-query($device) { 
    //scss mobile-first media query 
    @media screen and (min-width: $device) { 
     @content; 
    } 
} 
//function to generate the actual header size 
@mixin heading-size($size) { 
    $context-size-computed: $size * $step-size-font; 
    font-size: $context-size-computed * $amplifier-font-mobile + em; 
    @include media-query($on-laptop) { 
     font-size: $context-size-computed * $amplifier-font-desktop + em; 
    } 
} 
// Apply the stylings using the vars and mix-ins 
// context-free header styling 
@for $i from 1 through 6 { 
    h#{$i} { 
     font-weight: bold; 
     margin: $margin-heading; 
    } 
} 
//iterate thru all the contexts in context-font, setting the header sizes in each 
@each $element, $value in $context-font { 
    #{$element} { 
     //set header sizes 1-6 
     @for $i from 1 through 6 { 
      h#{$i} { 
       $bigger-size-proportional-to-smaller-number: (6-$i); 
       @include heading-size($bigger-size-proportional-to-smaller-number * $value); 
      } 
     } 
    } 
} 

Edit: Weitere (? Einfacher/besser) Art und Weise der kontextspezifische Schriftgrößen immer ist em Schriftgrößen zu verwenden, und die Schriftgröße in Ihrem Kontext ändern. Sie würden dies nur einmal pro Kontext (Artikel, Abschnitt, Div, was auch immer) tun, und es würde den gesamten darin enthaltenen Text betreffen. Das liegt daran, dass em ein relative font size ist.