In einigen Projekten möchte ich, dass sich die Schriftgröße sowie die Schriftfarbe ab einem bestimmten Viewport ändert.

In folgendem Beispiel ist die Schriftfarbe bis 800px schwarz (#000000) und die Schriftgröße 16px, ab 800px soll die Schriftfarbe blau (#81CFE0) und die Schriftgröße von 16px beibehalten werden. Ab 1000px soll die Schriftfarbe zu orange (#F9690E) wechseln und die Schriftgröße 26px sein.

DEMO

Hierfür nutze ich ein Mixin, welches in jeder Klasse eingesetzt werden kann und diesem die gewünschten Werte übergeben werden.

Folgendes Mixin benötigst Du dafür:

  @mixin font-size($fs-map) {
  @each $val in $fs-map {
    $fs-breakpoint: nth($val, 1);
    $fs-font-size: nth($val, 2);
    $fs-font-color: nth($val, 3);

    @if $fs-breakpoint == null {
      font-size: $fs-font-size;
      @include font-color($fs-font-color);
    }
    @else {
      @media screen and (min-width: $fs-breakpoint) {
        font-size: $fs-font-size;
        @include font-color($fs-font-color);
      }
    }
  }
}

@mixin font-color($fs-font-color) {
  @if $fs-font-color {
    color: $fs-font-color;
  }
}

Der Aufruf erfolgt folgendermaßen: Der erste Wert ist die Viewbreite, ab der die Änderung eintreten soll. Der zweite Wert ist die Schriftgröße und der dritte die Farbe. Null bedeutet, kein Wert wird übergeben.

  $body-fontsize: (
  (null, 16px, #000000),
  (800px, null, #81CFE0),
  (1000px, 26px, #F9690E)
);

body {
  @include font-size($body-fontsize);
}

Der generierte CSS sieht wie folgt aus:

  body {
  font-size: 16px;
  color: #000000;
}

@media screen and (min-width: 800px) {
  body {
    color: #81CFE0;
  }
}

@media screen and (min-width: 1000px) {
  body {
    font-size: 26px;
    color: #F9690E;
  }
}

Ich freue mich auf Dein Feedback.


478 0 0