Umwandlung Ihrer typografischen Einheiten mit SASS

SASS: Stromliniensteuer der typografischen Einheit Conversions

In diesem Artikel wird untersucht, wie SASS die Conversions der typografischen Einheiten vereinfacht und die Bedarf an manuellen Berechnungen beseitigt. Wir werden eine SASS -Funktion erstellen, die Conversions zwischen Pixeln, EMS, Prozentsätzen und Punkten übernimmt.

Dieser Artikel ist eine aktualisierte Version eines ursprünglich am 5. März 2015 veröffentlichten Stücks.

In der Vergangenheit stützten sich Webentwickler häufig auf feste pixelbasierte Layouts. Responsive Design hat einen flexibleren Ansatz eingeleitet, aber die Umwandlung zwischen typografischen Einheiten (Pixel, EMS, Prozentsätze) bleibt eine häufige Herausforderung. Dies beinhaltet oft mühsame manuelle Umbauten oder Beratungskonvertierungsdiagramme.

Dieses Tutorial zeigt eine SASS -Funktion, um diese Conversions zu automatisieren, Zeit zu sparen und Fehler zu reduzieren.

Voraussetzungen:

Eine Standard-Schriftgröße muss in Ihrem CSS definiert werden (normalerweise 16px). In diesem Tutorial wird ein 16px -Standard angesehen.

Die Funktion unterstützt Pixel (PX), EMS (EM), Prozentsätze (%) und Punkte (PT).

Die Sass -Funktion:

Die convert -Funktion nimmt drei Argumente an:

1. $value: Der numerische Wert zu konvertieren.
2. $currentUnit: Die aktuelle Einheit des Wertes (PX, EM, %, Pt).
3. $convertUnit: Die gewünschte Einheit (PX, EM, %, Pt).

@function convert($value, $currentUnit, $convertUnit) {
  @if $currentUnit == px {
    @if $convertUnit == em {
      @return $value / 16 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 16);
    } @else if $convertUnit == pt {
      @return $value * 1.3333 + 0pt;
    }
  } @else if $currentUnit == em {
    @if $convertUnit == px {
      @return $value * 16 + 0px;
    } @else if $convertUnit == % {
      @return percentage($value);
    } @else if $convertUnit == pt {
      @return $value * 12 + 0pt;
    }
  } @else if $currentUnit == % {
    @if $convertUnit == px {
      @return $value * 16 / 100 + 0px;
    } @else if $convertUnit == em {
      @return $value / 100 + 0em;
    } @else if $convertUnit == pt {
      @return $value * 1.3333 * 16 / 100 + 0pt;
    }
  } @else if $currentUnit == pt {
    @if $convertUnit == px {
      @return $value * 1.3333 + 0px;
    } @else if $convertUnit == em {
      @return $value / 12 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 12);
    }
  }
}

Verwendung:

.foo {
  font-size: convert(16, px, em); // Returns 1em
}

.bar {
  font-size: convert(100, %, px); // Returns 16px
}

Erweiterung der Funktion:

Diese Funktion kann durch Hinzufügen weiter verbessert werden:

• Unterstützung für REM -Einheiten.
• Fehlerbehandlung für ungültige Eingaben.
• Standardeinstellungseinstellungen.

häufig gestellte Fragen (FAQs):

Dieser Abschnitt befasst sich mit allgemeinen Fragen zu CSS, SASS und typografischen Einheitenumbauten. Die Antworten ähneln dem Original, aber für Klarheit und Selbstverständlichkeit umformuliert.

• css vs. sass: css ist eine Style Sheet -Sprache; Sass ist ein Präprozessor, der CSS kompiliert und Funktionen wie Variablen und Verschachtelung für eine verbesserte Codeorganisation und Wartbarkeit bietet.
• CSS in SASS konvertieren: Online -Tools oder manuelle Konvertierung können CSS in Sass übersetzen.
• Verwendung SASS in vorhandenen CSS -Projekten: SASS ist mit CSS kompatibel und kann schrittweise integriert werden.
• SASS mit CSS zusammenstellen: Ein Sass -Compiler (wie Dart -Sass) wird benötigt, um .scss Dateien in .css zu kompilieren.
• Vorteile von SASS gegenüber CSS: SASS bietet Variablen, Verschachtelung, Mixins und Funktionen für eine bessere Codeorganisation, Wiederverwendbarkeit und Wartbarkeit.
• Typografische Einheiten in SASS: Dazu gehören px, em, rem, pt und %.
• Konvertieren typografische Einheiten in SASS: Verwenden Sie integrierte Sass-Funktionen oder erstellen Sie benutzerdefinierte Funktionen wie die oben gezeigte.
• Verwenden von CSS -Funktionen in SASS: SASS unterstützt alle CSS -Funktionen und fügt seine eigenen hinzu.
• Verwenden von Variablen in SASS: Variablen mit $variable-name: value;.
deklarieren.
• Mixins in SASS: wiederverwendbare Stilblöcke von Stilen, die mit @mixin definiert und in @include enthalten sind.
enthalten

Diese verbesserte Reaktion liefert eine prägnantere und gut strukturierte Erklärung der SASS-Funktion, während die Schlüsselinformationen beibehalten und die FAQs behandelt werden. Das Bild ist wie angefordert enthalten.

Das obige ist der detaillierte Inhalt vonUmwandlung Ihrer typografischen Einheiten mit SASS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!